Theme mit benutzerdefinierter Farbe fehlt im Storybook-Steuerwert – Problemlösung für Material UI, TypeScript und Storybook

Question

Ich verwende React 18, TypeScript, MUI 5 und Storybook 6.5.

Ich versuche, meinem MUI-Design eine benutzerdefinierte Farbe hinzuzufügen und diese in den Dropdown-Optionen des Storybooks für die Farbeigenschaft meiner Button-Komponente widerzuspiegeln, aber es scheint nicht zu funktionieren.

Ich habe die Anleitung zur Modulerweiterung in der MUI-Dokumentation befolgt und bei harter Codierung akzeptiert die MaterialButton-Komponente zwar „myCustomColor“, aber Storybook zeigt es nicht in der Dropdown-Auswahl für die Farbeigenschaft an.

Ich würde mich über jede Anleitung/Idee freuen.

目前我的文件如下:

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

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

// src/styles/expanded-theme.ts
import '@mui/material/styles';
import '@mui/material/Button';

Modul '@mui/material/styles/createPalette' deklarieren {
    Schnittstellenpalette {
        myCustomColor: Palette['primary'];
    }
    Schnittstelle PaletteOptions {
        myCustomColor?: PaletteOptions['primary'];
    }
}

Modul '@mui/material/Button/Button' deklarieren {
    Schnittstelle ButtonPropsColorOverrides {
        myCustomColor: true;
    }
}

// src/components/Button.tsx
import React aus „react“;
import { Button as MaterialButton } from "@mui/material";
import type { ButtonProps as MuiButtonProps } from „@mui/material“;

Exportschnittstelle ButtonProps erweitert MuiButtonProps {
  Etikett: Zeichenfolge;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

export const Button = (props: ButtonProps) => {
  const { label } = props;
  return <MaterialButton {...props}>{label}</MaterialButton>;
};

// .storybook/preview.js
import { CssBaseline, ThemeProvider } from „@mui/material“;
{ Story } aus „@storybook/react“ importieren;

import { theme } from "../src/styles/theme";

const-Parameter exportieren = {
  Aktionen: { argTypesRegex: "^on[A-Z].*" },
  Steuerelemente: {
    expandiert: true, // Fügt die Beschreibungs- und Standardspalten hinzu
    Matcher: {
      Farbe: /(Hintergrund|Farbe)$/i,
      Datum: /Datum$/,
    },
  },
};

export const withMuiTheme = (Story) => {
  zurückkehren (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Geschichte />
    </ThemeProvider>
  );
};

export const decorators = [withMuiTheme];

// .storybook/main.js
module.exports = {
  Geschichten: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  Addons: [
    „@storybook/addon-links“,
    „@storybook/addon-essentials“,
    „@storybook/addon-interactions“,
  ],
  Framework: „@storybook/react“,
  Kern: {
    Builder: „@storybook/builder-webpack5“,
  },
  Typoskript: {
    prüfen: falsch,
    checkOptions: {},
    ReactDocgen: „react-docgen-typescript“,
    reagierenDocgenTypescriptOptions: {
      AllowSyntheticDefaultImports: false, // beschleunigt die Erstellungszeit des Storybooks
      esModuleInterop: false, // beschleunigt die Erstellungszeit des Storybooks
      ShouldExtractLiteralValuesFromEnum: true, // lässt Union-Requisitentypen wie Variante und Größe als ausgewählte Steuerelemente erscheinen
      ShouldRemoveUndefinedFromOptional: true, // lässt String- und Boolesche Typen, die undefiniert sein können, als Eingaben und Schalter erscheinen
      savePropValueAsString: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

Answer 1

我们最终通过使用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;