我正在使用React 18，TypeScript，MUI 5和Storybook 6.5。

我试图向我的MUI主题添加自定义颜色，并在Storybook的下拉选项中反映出来，用于我的Button组件的color属性，但似乎不起作用。

我按照MUI文档中的模块扩充指南进行操作，当硬编码时，MaterialButton组件确实接受"myCustomColor"，但是Storybook不会在color属性的下拉选项中显示它。

我会感激任何指导/想法。

目前我的文件如下：

// src/styles/theme.ts
import { createTheme } from "@mui/material";

export const theme = createTheme({
  palette: {
    myCustomColor: {
      main: '#ff5555',
      contrastText: '#fff',
    },
  },
});

// 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;
    }
}

// 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;
}

export const Button = (props: ButtonProps) => {
  const { label } = props;
  return {label};
};

// .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 (
    
      
      
    
  );
};

export const decorators = [withMuiTheme];

// .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),
    },
  },
};