如何使用自定义CSS修改Strapi管理面板的UI颜色等样式及操作目录？

首先明确核心原则：禁止直接修改node_modules/@strapi目录下的源码文件，这类修改在依赖更新、项目重装时会被完全覆盖，属于无效操作。所有官方支持的自定义调整，全部基于项目自有源码目录完成。

需访问的核心自定义目录 #

对应你的UI样式调整需求，需要用到的项目路径如下：

• 管理面板全局配置入口：项目根目录下的 src/admin/app.[js/ts]（JS项目为js文件，TS项目为ts文件）
• 自定义静态资源存放目录：src/admin/public/，可存放自定义CSS文件、定制字体等资源
• 打包配置调整入口：src/admin/webpack.config.[js/ts]，当需要引入自定义CSS、调整构建规则时修改这个文件

具体修改操作 #

方案1：批量调整全局配色（对应你的核心需求，优先选） #

Strapi管理面板自带完整的设计token体系，所有全局主色、提示色、侧边栏底色等配色规则都抽离成了可覆盖的主题变量，不需要逐组件写CSS改色：

1. 打开src/admin/app.[js/ts]配置文件
2. 在导出的config字段下新增theme配置块，直接替换对应主题变量的色值即可，可覆盖的变量包含品牌主色、成功状态色、警告状态色、危险操作色、中性色阶等所有全局配色
3. 执行npm run build重新打包管理面板，启动项目即可看到全局配色统一生效

这种改色方式的优势：所有基于Strapi设计系统渲染的组件会自动适配你设置的色值，不会出现局部组件漏改、样式风格不一致的问题，完全匹配设计规范调整的需求。

方案2：细粒度CSS自定义覆盖 #

如果需要调整变量覆盖不到的细节样式（比如按钮圆角、卡片阴影、行高、字重等），可以通过引入自定义CSS文件实现：

1. 在src/admin/public/目录下新建自定义样式文件，比如admin-custom-style.css
2. 调整src/admin/webpack.config.[js/ts]的配置，确保自定义CSS文件会被打包到最终的管理面板产物中
3. 在自定义CSS文件中通过设置更高的选择器优先级，覆盖Strapi的默认组件样式即可

常见踩坑提示 #

• 所有样式调整完成后，必须执行npm run build生成新的管理面板静态资源，开发热更新模式下的部分样式调整不会自动同步到生产构建产物中
• 不要把管理面板的覆盖样式写在项目根目录的全局CSS文件中，管理面板是独立打包的应用，根目录的全局CSS不会被自动注入到管理面板页面中

内容的提问来源于stack exchange，提问作者andromeda1995-bit