如何在故事书中显示 material-ui 主题对象

Posted 2023-02-19

【中文标题】如何在故事书中显示 material-ui 主题对象

【英文标题】：How can I display the material-ui theme object in storybook

【发布时间】：2021-11-23 05:09:02

【问题描述】：

我想以某种方式在故事书中显示我们的主题对象，但还没有找到从组件内部查看主题的方法。

至少我想要一些类似 material-ui 在这里显示主题结构的东西：https://mui.com/customization/default-theme/

理想情况下，我想通过对象的某些部分进行映射并显示颜色、字体大小、字体粗细、间距等类似这样（但它不起作用，因为您无法访问这样的主题）

const useStyles = makeStyles((theme) => theme.palette.primary);

export const Primary = (): JSX.Element => 
  const classes = useStyles;

  return (
    <>
      Object.keys(classes).map((key) => <Box bgcolor=classes[key]>key</Box>)
    </>
  )
;

【参考方案1】：

由于 mui.com 网站是开源的，您可以通过复制默认主题页面上的source for the theme explorer 来实现最低限度。你可以看到它们是如何遍历主题对象的，在某种程度上类似于你的代码 sn-p。

如果您只想突出显示主题文件的部分内容，您可以遍历对象并使用一些内置组件，例如ColorPalette from @storybook/addon-docs。在palette page上的MUI项目中，他们manually pull out each color使用useTheme()。

也许故事书插件可能会更好地放置？页面底部的 MUI 用法示例：https://storybook.js.org/addons/@react-theming/storybook-addon/