Tema dengan warna tersuai tiada dalam nilai kawalan Buku Cerita - Penyelesaian masalah untuk UI Bahan, TypeScript dan Buku Cerita

Question

Saya menggunakan React 18, TypeScript, MUI 5 dan Storybook 6.5.

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.

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.

Saya akan menghargai sebarang bimbingan/idea.

目前我的文件如下：

// src/styles/theme.ts
import { createTheme } daripada "@mui/material";

eksport tema const = createTheme({
  palet: {
    myCustomColor: {
      utama: '#ff5555',
      contrastText: '#fff',
    },
  },
});

// 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;
    }
}

// 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>;
};

// .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];

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

Answer 1

Kami akhirnya menyelesaikan masalah ini dengan menggunakan Storybook argTypes.
Ini menyelesaikan masalah kehilangan nilai, tetapi memaksa kita untuk menentukannya sendiri.

Terdapat

soalan berkaitan pada repositori GH Storybook, saya meninggalkan komen tetapi belum mendapat sebarang balasan lagi.

Kami menggunakan kekunci objek palet tema MUI dan menapis kekunci yang kami tahu sebenarnya bukan warna:

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;