故事本 Addon CSS 变量 主题

故事书 CSS 变量 主题可用于切换 CSS 文件 故事书。 。 。 .

安装

npm install @etchteam/storybook-addon-css-variables-theme --save-dev

配置

第1步:添加加词

创建名为的文件 main.js 在你身边 .storybook 文件夹.

增加以下代码:

module.exports = {
  addons: ['@etchteam/storybook-addon-css-variables-theme'],
};

步骤2: 包含您的 CSS 文件

创建名为的文件 preview.js 在你身边 .storybook 文件夹.

在此文件中, 您需要使用加载器导入您的样式文件 。 以下是如何做到这一点的例子:

import light from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/light.css'
import dark from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/dark.css'

此代码调用 style-loader 与 ?injectType=lazyStyleTag 这样它就不会马上运行CSS.

你可以交换出去 css-loader 您所喜欢的SCSS/Less/etc装载器.

这里使用的任何加载器都需要安装在您的工程中: npm i -D style-loader css-loader

第3步:增加装饰器

同样 preview.js 文件从 CSS 变量中导入装饰器

import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'

export const decorators = [
  cssVariablesTheme,
];

然后通过导出参数将 CSS 文件传递到加通.

export const parameters = {
  cssVariables: {
    files: {
      'Light Theme': light,
      'Dark Theme': dark,
    }
  }
}

如果从第一个负载中选择默认主题, 请在选项中添加“ 默认主题 ” .

export const parameters = {
  cssVariables: {
    files: {
      'Light Theme': light,
      'Dark Theme': dark,
    },
    defaultTheme: 'Light Theme'
  }
}

怎么样

为故事设定一个特定的主题

传出主题密钥为 theme 默认到特定主题的参数:

export default {
  title: 'Example/Header',
  component: Header,
  parameters: {
    cssVariables: {
      theme: 'dark'
    }
  }
};

在故事中获取当前启用的主题

您可以从故事书提供的上下文对象中访问当前设定的主题作为第二个参数.

const Template: ComponentStory<typeof Button> = (args, context) => (
  <Button {...args}>{context.globals.cssVariables ?? 'No theme'}</Button>
);

或者看习惯 storybookcssvariables:theme:change 活动 document。 。 。 .

document.addEventListener(
  'storybookcssvariables:theme:change',
  (event: CustomEvent) => {
    console.info(`The theme changed to ${event?.detail?.theme}`);
  },
);

由查询字符串设置主题

主题被存储在故事书全球.

通过添加将主题传递到 URL 作为查询 &globals=cssVariables:mytheme 给url. 如果多词主题查询是 &globals=cssVariables:my+theme

用于 MDX 文件

此附加通过一个 装饰。 。 。 .

因此,在MDX文件中, 样式将仅适用于 <Story> 或者说 <Canvas>。 。 。 .

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}用.. 爱奇