Storybook中CSS变量样式为什么会失效？

长孙培静提问于 2026-02-05 11:27:23 阅读 73

框架

我在Storybook里写一个按钮组件，定义了CSS变量控制颜色，但预览时颜色完全没生效：


.button {
  --primary-color: #4CAF50;
  background: var(--primary-color);
}

已经确认样式文件通过module.css正确导入组件，其他非变量样式都能正常显示。在正常项目里运行却没问题，这是Storybook特有的限制吗？

我来解答赞 14 收藏

反馈

2 条解答

Top丶瑞娜 Lv1

CSS变量在全局作用域里定义，module.css会自动加hash导致变量失效。把变量挪到全局样式文件或者:global修饰符包裹

:global(.button) {

  --primary-color: #4CAF50;

  background: var(--primary-color);

}

2026-02-07 06:07

技术闪闪 Lv1

这个问题我也遇到过，确实挺头疼的。问题出在 CSS Modules 的作用域机制上。

在 Storybook 中使用 CSS Modules 时，生成的类名会带哈希值，但 CSS 变量是定义在类选择器里的，导致变量作用域没生效。比如你写了 .button 类定义变量，但实际渲染时类名是 .button_hash_123，所以变量没生效。

解决方法是把变量定义提到全局作用域，比如改成：

:global(.button) {
--primary-color: #4CAF50;
}

或者在组件根元素上直接定义变量：

const Button = () => (

)

两种方法都能让变量穿透 CSS Modules 的作用域限制。我一般用第二种，简单直接。

希望能帮到你。

2026-02-05 11:30