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

【问题标题】：Using material UI component in storybook在故事书中使用材质 UI 组件
【发布时间】：2021-12-11 02:05:45
【问题描述】：

我正在尝试使用 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 的错误吗？

【问题讨论】：

标签： reactjs material-ui storybook

【解决方案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。

【讨论】：