<p>Saya menggunakan React 18, TypeScript, MUI 5 dan Storybook 6.5. </p><p> Saya cuba menambah warna tersuai pada tema MUI saya dan memaparkannya dalam pilihan lungsur turun Buku Cerita untuk sifat warna komponen Butang saya, tetapi ia nampaknya tidak berfungsi. </p><p> Saya mengikuti panduan penambahan modul dalam dokumentasi MUI, dan apabila dikodkan keras, komponen MaterialButton menerima "myCustomColor", tetapi Buku Cerita tidak menunjukkannya dalam pilihan lungsur turun untuk sifat warna. </p><p> Saya akan menghargai sebarang bimbingan/idea.</p> <p>目前我的文件如下：</p> <pre class="brush:php;toolbar:false;">// src/styles/theme.ts import { createTheme } daripada "@mui/material"; eksport tema const = createTheme({ palet: { myCustomColor: { utama: '#ff5555', contrastText: '#fff', }, }, });</pre> <pre class="brush:php;toolbar:false;">// src/styles/expanded-theme.ts import '@mui/material/styles'; import '@mui/material/Button'; isytiharkan modul '@mui/material/styles/createPalette' { antara muka Palet { myCustomColor: Palet['primary']; } antara muka PaletteOptions { myCustomColor?: PaletteOptions['primary']; } } isytihar modul '@mui/material/Button/Button' { antara muka ButtonPropsColorOverrides { myCustomColor: benar; } }</pre> <pre class="brush:php;toolbar:false;">// src/components/Button.tsx import React daripada "react"; import { Butang sebagai Butang Bahan } daripada "@mui/material"; jenis import { ButtonProps sebagai MuiButtonProps } daripada "@mui/material"; antara muka eksport ButtonProps memanjangkan MuiButtonProps { label: rentetan; onClick: React.MouseEventHandler<HTMLButtonElement>; } eksport const Butang = (props: ButtonProps) => { const { label } = props; kembalikan <MaterialButton {...props}>{label}</MaterialButton>; };</pre> <pre class="brush:php;toolbar:false;">// .storybook/preview.js import { CssBaseline, ThemeProvider } daripada "@mui/material"; import { Story } daripada "@storybook/react"; import { theme } daripada "../src/styles/theme"; eksport parameter const = { tindakan: { argTypesRegex: "^on[A-Z].*" }, kawalan: { dikembangkan: benar, // Menambah penerangan dan lajur lalai padanan: { warna: /(latar belakang|warna)$/i, tarikh: /Date$/, }, }, }; export const withMuiTheme = (Cerita) => { kembali ( <ThemeProvider theme={theme}> <CssBaseline /> <Cerita /> </ThemeProvider> ); }; penghias konst eksport = [denganTemaMui];</pre> <pre class="brush:php;toolbar:false;">// .storybook/main.js module.exports = { cerita: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], tambahan: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", ], rangka kerja: "@storybook/react", teras: { pembina: "@storybook/builder-webpack5", }, skrip taip: { semak: palsu, pilihan semak: {}, reactDocgen: "react-docgen-typescript", reactDocgenTypescriptOptions: { allowSyntheticDefaultImports: false, // mempercepatkan masa pembinaan buku cerita esModuleInterop: false, // mempercepatkan masa pembinaan buku cerita shouldExtractLiteralValuesFromEnum: true, // menjadikan jenis prop kesatuan seperti varian dan saiz muncul sebagai kawalan pilih shouldRemoveUndefinedFromOptional: true, // menjadikan rentetan dan jenis boolean yang boleh tidak ditentukan muncul sebagai input dan suis savePropValueAsString: benar, propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : benar), }, }, };</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;