在故事书中使用材质 UI 组件

Posted 2023-02-19

【中文标题】在故事书中使用材质 UI 组件

【英文标题】：Using material UI component in storybook

【发布时间】：2021-12-11 02:05:45

【问题描述】：

我正在尝试使用 Material UI 作为启动器来制作我自己的组件。然后将它们添加到故事书中。

所以我使用storybook-addon-material-ui。

如您所见，Material UI 插件在这里，但如果我更改它们，我的组件不会发生任何事情。

我的 .storybook/preview.js 文件：

import  muiTheme  from 'storybook-addon-material-ui'

export const parameters = 
  actions:  argTypesRegex: "^on[A-Z].*" ,
  controls: 
    matchers: 
      color: /(background|color)$/i,
      date: /Date$/,
    ,
  ,


export const decorators = [
    muiTheme()
];

如果我转到组件的 Docs 选项卡，我会收到这个 Material UI 错误：

类型错误 无法读取未定义的属性（读取“borderRadius”） 调用堆栈 推../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState 供应商~main.iframe.bundle.js:9051:29 ...

你认为这是 Material UI v5 的错误吗？

【参考方案1】：

首先，请提供尽可能多的信息，例如您的storybook 或material-ui 版本、您的故事代码、codeandbox 是最有帮助的。

如果我更改它们，我的组件不会发生任何事情。

根据其package.json，storybook-addon-material-ui 可用于：

"@material-ui/core": "^3.9.3"

@mui/material v5 引入了影响样式/主题管理的新样式引擎似乎不适用于此插件，但我可能是错的。

如果我转到组件的 Docs 选项卡，我会收到这个 Material UI 错误

这似乎是一个影响 @mui/material 的已知故事书问题，并且与故事书自己的“文档”插件主题管理、see here 或 here 的几个临时修复有关。

在我的情况下这是有效的：

import  ThemeProvider as MUIThemeProvider, createTheme  from '@mui/material/styles';
import  ThemeProvider  from 'emotion-theming';

const theme = createTheme(
    palette: 
        primary: 
            main: '#000000'
        ,
        secondary: 
            main: '#ff00ff'
        
    
);

export const decorators = [
    (Story) => (
        <MUIThemeProvider theme=theme>
            <ThemeProvider theme=theme>
                Story()
            </ThemeProvider>
        </MUIThemeProvider>
    )
];

回答问题：

你认为这是 Material UI v5 的错误吗？

我相信它更多地与插件与材料 v5 的兼容性有关，或者与“文档”问题的故事书的兼容性，而不是材料 v5。