先看清模板的目录结构
拿到一个 React 模板，不要急着改代码。先花十分钟浏览目录：src/components 放通用组件，src/pages 或 src/views 放页面级组件，src/assets 放图片字体，src/styles 或 src/index.css 放全局样式。配置文件通常在根目录，如 vite.config.js、tailwind.config.js 或 craco.config.js。
理解哪些是入口文件（main.jsx、App.jsx），哪些是布局组件（Layout、Header、Sidebar），修改时才能定位准确。
修改页面内容与组件
模板里的文字、图片大多写在 JSX 里。找到对应页面组件，直接替换文本节点和 img 的 src 即可。
如果页面由多个子组件拼成，建议逐层修改：先改页面容器，再改内部卡片、列表项。遇到循环渲染的列表，数据通常来自 mock 目录或组件内的常量数组，把数组换成真实数据接口即可。
新增页面的步骤
- 在
pages下新建文件夹和组件文件； - 在路由配置中注册新路径；
- 如需导航入口，在侧边栏或顶部菜单数组里追加一项。
样式覆盖的三种方式
模板样式冲突是最常见的问题。优先使用以下顺序：
- 全局变量：如果模板用 CSS 变量或 Tailwind 配置，改主题色、圆角、字体最省事；
- 模块化样式：组件自带的
.module.css文件，直接改对应类名； - 追加覆盖：在组件最外层加自定义类名，写新样式覆盖旧规则，避免直接改模板源码导致升级困难。
使用 Tailwind 时，注意 !important 修饰符的写法，例如 !text-red-500。
路由与菜单的联动修改
React 模板常用 react-router。路由表一般在 src/router 或 App.jsx 中。新增路由后，菜单高亮往往依赖当前路径匹配，检查菜单项的 path 与路由 path 是否一致。
如果删除页面，记得同步删除路由项和菜单项，否则会出现空白页或 404。
常见坑点与建议
- 不要直接删除模板的
Layout组件，否则页面会失去整体框架； - 修改
package.json中的项目名称后，重新安装依赖再启动； - 图片路径使用
import或public目录，避免打包后 404； - 保留一份原始模板备份，方便对比排查。
按照“先结构、后内容、再样式”的顺序修改，能减少返工。改完后运行 npm run build 验证生产环境是否正常。
