<p>Ich verwende React 18, TypeScript, MUI 5 und Storybook 6.5. </p><p> 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. </p><p> 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. </p><p> Ich würde mich über jede Anleitung/Idee freuen.</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', KontrastText: '#fff', }, }, });</pre> <pre class="brush:php;toolbar:false;">// 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; } }</pre> <pre class="brush:php;toolbar:false;">// 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>; };</pre> <pre class="brush:php;toolbar:false;">// .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];</pre> <pre class="brush:php;toolbar:false;">// .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), }, }, };</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;