Thème avec une couleur personnalisée manquante dans la valeur de contrôle Storybook - Solution au problème pour Material UI, TypeScript et Storybook

Question

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',
    },
  },
});</pré>
<pre class="brush:php;toolbar:false;">// 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 ;
    }
}</pré>
<pre class="brush:php;toolbar:false;">// 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<HTMLButtonElement>;
}

export const Button = (accessoires : ButtonProps) => {
  const {étiquette} = accessoires ;
  return <MaterialButton {...props}>{label}</MaterialButton>;
};</pré>
<pre class="brush:php;toolbar:false;">// .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 (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Histoire />
    </ThemeProvider>
  );
} ;

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

Answer 1

Nous avons finalement résolu ce problème en utilisant Storybook argTypes.
Cela résout le problème des valeurs manquantes, mais nous oblige à les définir nous-mêmes.

Il y a une

question connexe sur le référentiel Storybook's GH, j'ai laissé un commentaire mais je n'ai pas encore reçu de réponse.

Nous utilisons les clés de l'objet palette de thème MUI et filtrons les clés dont nous savons qu'elles ne sont pas réellement des couleurs :

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;