Storybook Addon Material-UI 使用教程

最新推荐文章于 2024-09-24 08:16:11 发布

强妲佳Darlene

最新推荐文章于 2024-09-24 08:16:11 发布

阅读量389

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00040/article/details/141621271

版权

Storybook Addon Material-UI 使用教程

storybook-addon-material-uiAddon for storybook wich wrap material-ui components into MuiThemeProvider. :page_with_curl: This helps and simplifies development of material-ui based components.项目地址:https://gitcode.com/gh_mirrors/st/storybook-addon-material-ui

1. 项目的目录结构及介绍

storybook-addon-material-ui/
├── src/
│   ├── index.js
│   ├── addons.js
│   ├── config.js
│   ├── decorators/
│   │   ├── withMuiTheme.js
│   ├── themes/
│   │   ├── defaultTheme.js
├── .storybook/
│   ├── main.js
│   ├── preview.js
├── package.json
├── README.md

src/：包含项目的主要源代码。
- index.js：项目的入口文件。
- addons.js：定义Storybook插件的配置。
- config.js：Storybook的配置文件。
- decorators/：包含用于装饰Storybook故事的装饰器。
  - withMuiTheme.js：用于包装故事的主题提供器。
- themes/：包含默认的主题配置。
  - defaultTheme.js：默认的主题文件。
.storybook/：Storybook的配置目录。
- main.js：Storybook的主要配置文件。
- preview.js：Storybook的预览配置文件。
package.json：项目的依赖和脚本配置。
README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是src/index.js，它负责初始化插件并将其添加到Storybook中。以下是该文件的简要介绍：

// src/index.js
import addons from '@storybook/addons';
import { addDecorator } from '@storybook/react';
import { withMuiTheme } from './decorators/withMuiTheme';

addons.register('storybook/material-ui', api => {
  addDecorator(withMuiTheme);
});

addons.register：注册一个Storybook插件。
addDecorator：添加一个装饰器，用于包装故事。
withMuiTheme：自定义的装饰器，用于提供Material-UI主题。

3. 项目的配置文件介绍

项目的配置文件主要位于.storybook/目录下，包括main.js和preview.js。

main.js

main.js文件定义了Storybook的主要配置，包括插件的加载和参数设置。

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '../preset.js',
  ],
};

stories：定义Storybook加载的故事文件路径。
addons：定义加载的插件列表。

preview.js

preview.js文件定义了Storybook的预览配置，包括全局装饰器和参数设置。

// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import { withMuiTheme } from '../src/decorators/withMuiTheme';

addDecorator(withMuiTheme);