如何让Storybook读取全局CSS变量？Emotion主题配置问题求助

你在React项目中通过Emotion设置的全局CSS变量在Storybook中无法生效，导致元素显示透明，可通过以下几种方式解决：

方法1：在Storybook预览配置中注入全局样式 #

在Storybook的.storybook/preview.js文件中，直接使用Emotion的Global组件注入全局样式，并传入默认主题值，确保Storybook初始化时就能拿到CSS变量：

import { Global } from '@emotion/react';
import globalStyle from '../path/to/your/globalStyle';
// 导入你的默认主题（无默认主题可直接定义基础色值对象）
import { defaultTheme } from '../feature/themeSlice';

export const decorators = [
  (Story) => (
    <>
      <Global styles={globalStyle(defaultTheme)} />
      <Story />
    </>
  ),
];

方法2：为Storybook添加主题提供者装饰器 #

如果你的主题通过Redux或自定义ThemeProvider管理，需在Storybook中添加对应装饰器，让所有故事都能获取主题上下文：

// .storybook/preview.js
import { Provider } from 'react-redux';
import { store } from '../path/to/your/store'; // 项目的Redux store
import { Global } from '@emotion/react';
import globalStyle from '../path/to/your/globalStyle';

export const decorators = [
  (Story) => {
    const theme = store.getState().theme;
    return (
      <Provider store={store}>
        <Global styles={globalStyle(theme)} />
        <Story />
      </Provider>
    );
  },
];

方法3：给CSS变量添加fallback值 #

在CSS文件中使用var()时，直接添加默认色值作为第二个参数，即使变量未注入，元素也会显示默认颜色：

.filled_div {
  background-color: var(--util-color, #66ccff); /* 替换为你的默认色值 */
  width: 5px;
  height: 5px;
  margin: 5px 1px 5px 1px;
  border-radius: 2.5px;
}

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