J'utilise React 18, TypeScript, MUI 5 et Storybook 6.5.

J'essaie d'ajouter une couleur personnalisée à mon thème MUI et de la refléter dans les options déroulantes du Storybook pour la propriété color de mon composant Button, mais cela ne semble pas fonctionner.

J'ai suivi le guide d'augmentation de module dans la documentation MUI, et lorsqu'il est codé en dur, le composant MaterialButton accepte "myCustomColor", mais Storybook ne l'affiche pas dans la sélection déroulante de la propriété color.

J'apprécierais tous conseils/idées.

目前我的文件如下：

// src/styles/theme.ts importer { createTheme } depuis "@mui/material" ; exporter le thème const = créer un thème ({ palette : { maCouleurPersonnalisée : { principal : '#ff5555', textecontraste : '#fff', }, }, }); 
// src/styles/expanded-theme.ts importer '@mui/material/styles' ; importer '@mui/material/Button'; déclarer le module '@mui/material/styles/createPalette' { Palette d'interfaces { maCouleurPersonnalisée : Palette['primaire'] ; } interface PaletteOptions { maCouleurPersonnalisée ? : PaletteOptions['primary'] ; } } déclarer le module '@mui/material/Button/Button' { interface ButtonPropsColorOverrides { maCouleurPersonnalisée : vrai ; } } 
// src/components/Button.tsx importer React depuis « react » ; importer { Button as MaterialButton } depuis "@mui/material" ; importer le type { ButtonProps as MuiButtonProps } depuis "@mui/material" ; l'interface d'exportation ButtonProps étend MuiButtonProps { étiquette : chaîne ; onClick : React.MouseEventHandler; } export const Button = (accessoires : ButtonProps) => { const {étiquette} = accessoires ; return {label}; }; 
// .storybook/preview.js importer { CssBaseline, ThemeProvider } depuis "@mui/material" ; importer { Story } depuis "@storybook/react" ; importer { thème } depuis "../src/styles/theme" ; exporter les paramètres const = { actions : { argTypesRegex : "^on[A-Z].*" }, contrôles: { expand: true, // Ajoute les colonnes de description et par défaut correspondants : { couleur : /(arrière-plan|couleur)$/i, date : /Date$/, }, }, } ; exporter const avecMuiTheme = (Histoire) => { retour (     ); } ; exporter les décorateurs const = [withMuiTheme];
 
// .storybook/main.js module.exports = { histoires : ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], modules complémentaires : [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", ], framework : "@storybook/react", cœur: { constructeur : "@storybook/builder-webpack5", }, dactylographié : { vérifier : faux, options de contrôle : {}, réagirDocgen : "réagir-docgen-typescript", réagirDocgenTypescriptOptions : { allowSyntheticDefaultImports : false, // accélère le temps de création du livre d'histoires esModuleInterop : false, // accélère le temps de création du livre d'histoires ShouldExtractLiteralValuesFromEnum : true, // fait apparaître les types d'accessoires d'union comme la variante et la taille en tant que contrôles de sélection ShouldRemoveUndefinedFromOptional : true, // fait apparaître les types chaîne et booléens qui peuvent être indéfinis comme entrées et commutateurs savePropValueAsString : vrai, propFilter : (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), }, }, };