确认你已经在依赖中安装了 Material-UI,如果没有,请按照官方文档的安装说明进行安装。
确保你的样式引入正确。在您的“index.js”或“index.tsx”文件的顶部,您应该添加以下导入声明:
import "@mui/styles"; import { ThemeProvider } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline";
module.exports = { addons: ["@storybook/addon-actions", "@storybook/addon-links", "@mui/react"] };
.stories.js
文件)中,您应该使用ThemeProvider
来传递您的主题。例如,如果您的项目使用默认的Material-UI主题,则可以如下设置:
import { ThemeProvider, createTheme } from "@mui/material/styles"; import { storiesOf } from "@storybook/react"; import { withKnobs, select } from "@storybook/addon-knobs"; import Button from "../Button";
const theme = createTheme();
storiesOf("Button", module)
.addDecorator(withKnobs)
.add("Default", () => (
这些步骤应该能够解决MUI样式在安装Storybook库时不起作用的问题。