<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> <pre class="brush:php;toolbar:false;">// src/styles/theme.ts import { createTheme } from "@mui/material"; export const theme = createTheme({ palette: { myCustomColor: { main: '#ff5555', contrastText: '#fff', }, }, });</pre> <pre class="brush:php;toolbar:false;">// src/styles/expanded-theme.ts import '@mui/material/styles'; import '@mui/material/Button'; declare module '@mui/material/styles/createPalette' { interface Palette { myCustomColor: Palette['primary']; } interface PaletteOptions { myCustomColor?: PaletteOptions['primary']; } } declare module '@mui/material/Button/Button' { interface ButtonPropsColorOverrides { myCustomColor: true; } }</pre> <pre class="brush:php;toolbar:false;">// src/components/Button.tsx import React from "react"; import { Button as MaterialButton } from "@mui/material"; import type { ButtonProps as MuiButtonProps } from "@mui/material"; export interface ButtonProps extends MuiButtonProps { label: string; onClick: React.MouseEventHandler<HTMLButtonElement>; } export const Button = (props: ButtonProps) => { const { label } = props; return <MaterialButton {...props}>{label}</MaterialButton>; };</pre> <pre class="brush:php;toolbar:false;">// .storybook/preview.js import { CssBaseline, ThemeProvider } from "@mui/material"; import { Story } from "@storybook/react"; import { theme } from "../src/styles/theme"; export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { expanded: true, // Adds the description and default columns matchers: { color: /(background|color)$/i, date: /Date$/, }, }, }; export const withMuiTheme = (Story) => { return ( <ThemeProvider theme={theme}> <CssBaseline /> <Story /> </ThemeProvider> ); }; export const decorators = [withMuiTheme];</pre> <pre class="brush:php;toolbar:false;">// .storybook/main.js module.exports = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", ], framework: "@storybook/react", core: { builder: "@storybook/builder-webpack5", }, typescript: { check: false, checkOptions: {}, reactDocgen: "react-docgen-typescript", reactDocgenTypescriptOptions: { allowSyntheticDefaultImports: false, // speeds up storybook build time esModuleInterop: false, // speeds up storybook build time shouldExtractLiteralValuesFromEnum: true, // makes union prop types like variant and size appear as select controls shouldRemoveUndefinedFromOptional: true, // makes string and boolean types that can be undefined appear as inputs and switches savePropValueAsString: true, propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), }, }, };</pre></p>

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;