如何在Storybook中修改指定元素的样式？自定义样式不生效怎么办？

问题原因 #

你操作的核心问题是样式文件放错了配置入口，除此之外还有选择器权重不足的问题：

• Storybook的manager-head.html仅作用于外壳UI（侧边栏、顶部工具栏等非预览区域），你需要修改的sbdocs文档内容属于iframe预览窗口的渲染范围，对应的配置文件是preview-head.html
• 单独写.sbdocs-a的选择器权重低于Storybook自带的默认样式，会被原生样式覆盖
• 不要使用css-19nbuh3这类带随机后缀的动态类，这类类名会随着版本更新、重新构建发生变化，不具备复用性

正确操作步骤 #

• 移除manager-head.html中你添加的样式代码，新增/打开.storybook/preview-head.html文件，写入以下内容：

<style>
.sbdocs .sbdocs-a {
  color: red !important;
}
</style>

• 完全重启当前运行的Storybook开发服务，刷新页面即可看到链接样式变为红色

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