Storybook自定义主题时修改UI配色不生效问题求助

解决步骤 #

• 重启Storybook服务
  manager级别的配置修改不支持热重载，你需要先终止当前运行的Storybook进程，重新执行启动命令（如npm run storybook），新的主题配置才会生效，仅刷新浏览器页面不会加载新的manager配置。
• 核对配置文件路径与导入规则
  1. 确认manager.js、YourTheme.js两个文件都放在项目根目录的.storybook文件夹下，不要存放到子目录中
  2. 确认文件名大小写与导入路径完全匹配，Linux、Mac系统对文件名大小写敏感，比如实际文件名为yourTheme.js的情况下，导入语句写import yourTheme from './YourTheme'会导入失败，Storybook会自动 fallback 到官方默认主题
• 确认配置项对应关系
  你提到修改appBg后还是显示hotpink，注意你现有配置里barBg的取值为hotpink：appBg是侧边栏、工具栏的外层全局背景，barBg是顶部导航栏的专属背景，确认你修改的配置项和你预期修改的界面区域对应。
• 排查冲突配置
  检查是否安装了@storybook/addon-themes等主题类插件，且在preview.js中也配置了主题参数，preview的主题配置优先级高于manager配置，会覆盖你写的自定义主题，全局主题统一在manager.js中配置即可。
• 清理缓存重试
  如果重启后还是不生效，删除项目下node_modules/.cache文件夹，再重新启动Storybook，避免旧缓存加载旧的主题配置。

内容的提问来源于stack exchange，提问作者Elin99