Storybook Addon Styled Component Theme 项目教程

Storybook Addon Styled Component Theme 项目教程

storybook-addon-styled-component-theme storybook addon 项目地址: https://gitcode.com/gh_mirrors/st/storybook-addon-styled-component-theme

1. 项目目录结构及介绍

storybook-addon-styled-component-theme/
├── .github/
│   └── workflows/
├── example/
├── src/
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── jest.config.js
├── package.json
├── tsconfig.json
├── tslint.json
└── yarn.lock

目录结构介绍

• .github/workflows: 包含GitHub Actions的工作流配置文件。
• example: 包含项目的示例代码，用于展示如何使用该插件。
• src: 包含项目的源代码，包括插件的核心逻辑。
• .gitignore: 指定Git版本控制系统忽略的文件和目录。
• .npmignore: 指定npm发布时忽略的文件和目录。
• CHANGELOG.md: 记录项目的变更日志。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的介绍和使用说明。
• jest.config.js: Jest测试框架的配置文件。
• package.json: 项目的npm配置文件，包含依赖项、脚本等信息。
• tsconfig.json: TypeScript的配置文件。
• tslint.json: TSLint的配置文件，用于代码风格检查。
• yarn.lock: Yarn包管理器的锁定文件，确保依赖项版本一致。

2. 项目启动文件介绍

项目的启动文件主要位于example目录下，用于展示如何启动和使用该插件。

example/package.json

{
  "scripts": {
    "storybook": "start-storybook -p 6006"
  },
  "dependencies": {
    "storybook-addon-styled-component-theme": "file:.."
  }
}

启动命令

在example目录下运行以下命令启动Storybook：

yarn storybook

3. 项目配置文件介绍

storybook/main.js

module.exports = {
  addons: [
    "storybook-addon-styled-component-theme/dist/preset"
  ]
};

storybook/preview.js

import { addDecorator } from "@storybook/react";
import { withThemesProvider } from "storybook-addon-styled-component-theme";
import { ThemeProvider } from "styled-components";

const themes = [theme1, theme2];

addDecorator(withThemesProvider(themes, ThemeProvider));

配置说明

• storybook/main.js: 配置Storybook的插件，添加storybook-addon-styled-component-theme插件。
• storybook/preview.js: 配置Storybook的全局装饰器，使用withThemesProvider装饰器来提供主题支持。

通过以上配置，你可以在Storybook中展示使用不同主题的组件。

storybook-addon-styled-component-theme storybook addon 项目地址: https://gitcode.com/gh_mirrors/st/storybook-addon-styled-component-theme