Storybook控件值中缺少自定义颜色的主题 - Material UI，TypeScript和Storybook的问题解决方案

Question

<p>我正在使用React 18，TypeScript，MUI 5和Storybook 6.5。</p><p> 我试图向我的MUI主题添加自定义颜色，并在Storybook的下拉选项中反映出来，用于我的Button组件的color属性，但似乎不起作用。</p><p> 我按照MUI文档中的模块扩充指南进行操作，当硬编码时，MaterialButton组件确实接受"myCustomColor"，但是Storybook不会在color属性的下拉选项中显示它。</p><p> 我会感激任何指导/想法。</p> <p>目前我的文件如下：</p>

// src/styles/theme.ts
从“@mui/material”导入{createTheme}；

导出常量主题 = createTheme({
  调色板：{
    我的自定义颜色：{
      主要：'#ff5555'，
      对比文本：'#fff'，
    },
  },
});</pre>
// src/styles/expanded-theme.ts
导入“@mui/material/styles”；
导入“@mui/material/Button”；

声明模块'@mui/material/styles/createPalette'{
    界面调色板{
        myCustomColor: 调色板['primary'];
    }
    界面调色板选项{
        myCustomColor?: PaletteOptions['primary'];
    }
}

声明模块'@mui/material/Button/Button'{
    接口 ButtonPropsColorOverrides {
        我的自定义颜色：true；
    }
}</pre>
// src/components/Button.tsx
从“反应”导入反应；
从“@mui/material”导入{按钮作为MaterialButton}；
从“@mui/material”导入类型 { ButtonProps as MuiButtonProps }；

导出接口 ButtonProps 扩展 MuiButtonProps {
  标签：字符串；
  onClick: React.MouseEventHandler;
}

导出 const Button = (props: ButtonProps) => {
  const { 标签 } = 道具；
  return {label};
};</pre>
// .storybook/preview.js
从“@mui/material”导入{CssBaseline，ThemeProvider}；
从“@storybook/react”导入{故事}；

从“../src/styles/theme”导入{主题}；

导出常量参数 = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  控制：{
    Expanded: true, // 添加描述和默认列
    匹配器：{
      颜色：/（背景|颜色）$/i，
      日期：/日期$/，
    },
  },
};

导出 const withMuiTheme = (故事) => {
  返回 （
    
      >
      <故事情节>
    </主题提供者>
  ）；
};

导出 const 装饰器 = [withMuiTheme];</pre>
// .storybook/main.js
模块. 导出 = {
  故事：[“../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)”]，
  插件：[
    “@storybook/addon-links”，
    “@storybook/addon-essentials”，
    “@storybook/addon-interactions”，
  ],
  框架：“@storybook/react”，
  核： {
    构建器：“@storybook/builder-webpack5”，
  },
  打字稿：{
    检查：假，
    检查选项：{},
    reactDocgen: "react-docgen-typescript",
    ReactDocgenTypescriptOptions: {
      allowedSyntheticDefaultImports: false, // 加快故事书的构建时间
      esModuleInterop: false, // 加快故事书的构建时间
      shouldExtractLiteralValuesFromEnum: true, // 使 union prop 类型（如变体和大小）显示为选择控件
      shouldRemoveUndefineFromOptional: true, // 使可以未定义的字符串和布尔类型显示为输入和开关
      savePropValueAsString：true，
      propFilter: (prop) =>; (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};</pre></p>

Answer 1

我们最终通过使用Storybook argTypes来解决了这个问题。
这解决了缺失值的问题，但是迫使我们自己定义它们。

Storybook的GH仓库上有一个相关问题，我发表了评论，但还没有得到任何答复。

我们正在使用MUI主题调色板对象的键，并过滤掉我们知道实际上不是颜色的键：

import { theme } from './theme';

const paletteKeysThatAreNotColors = [
  'mode',
  'common',
  'grey', // 这虽然有一个颜色的名字，但实际上不是颜色 :shrug:
  'contrastThreshold',
  'getContrastText',
  'augmentColor',
  'tonalOffset',
  'text',
  'divider',
  'background',
  'action',
];

const colors = Object.keys(theme.palette).filter(
  (colorKey) => !paletteKeysThatAreNotColors.includes(colorKey),
);
export default colors;