<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];;
// .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;