Reactjs 将材质UI与Storybook（和makeStyles）一起使用

我正在尝试将Storybook与MUI组件一起使用，它们工作得很好，直到我使用makeStyles钩子时必须将道具传递给它们

Styles.js

export const headerStyles=makeStyles({
标题：{
fontFamily:“DM Sans”，
填充：50，
重量：500，
尺寸：28，
},
标题：{
背景：“#4F36D6”，
},
});

Header.js

导出默认函数头（）{
const{header，title}=headerStyles（）；
返回(
用户界面风格-奥拉公寓
);
}

而这正是我试图做的，但没有多大成功

Header.stories.js

导出默认值{
标题：“标题”，
组件：标题，
};
导出常量主=（）=>{
const{header}=headerStyles（）；
返回；
};

---

是否可以在故事中使用makeStyles道具？

是否有错误？如果您没有成功，会发生什么情况？@SethLutske它不会崩溃，但是标题上显示的样式没有与

headerStyles（）一起应用的样式。

makeStyles

返回一个react钩子，因此建议对其进行适当命名，即与

useHeaderStyles

类似的内容。

Header

组件在内部使用钩子，并且不使用任何道具，因此从故事中将

className

道具传递给它将没有效果。您的故事可以是功能组件，因此它们也可以使用react挂钩。您是否检查过DOM以查看您的样式是否被注入其中？样式是否被覆盖？@DrewReese检查DOM在这里似乎没有多大用处，但样式似乎没有被覆盖。顺便说一句，我不知道它是否相关，但我使用的字体源来自google fonts，它是在

index.html的
中使用
安装的，而不是来自MUIAre的字体。你有错误吗？如果您没有成功，会发生什么情况？@SethLutske它不会崩溃，但是标题上显示的样式没有与
headerStyles（）一起应用的样式。
makeStyles
返回一个react钩子，因此建议对其进行适当命名，即与
useHeaderStyles
类似的内容。
Header
组件在内部使用钩子，并且不使用任何道具，因此从故事中将
className
道具传递给它将没有效果。您的故事可以是功能组件，因此它们也可以使用react挂钩。您是否检查过DOM以查看您的样式是否被注入其中？样式是否被覆盖？@DrewReese检查DOM在这里似乎没有多大用处，但样式似乎没有被覆盖。顺便说一句，我不知道它是否相关，但我使用的字体源来自谷歌字体，它是使用
安装在
index.html的
中的
，而不是来自MUI的