<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> 
我们最终通过使用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;