Storybook 컨트롤 값에 사용자 정의 색상이 누락된 테마 - Material UI, TypeScript 및 Storybook 문제 해결 방법

Question

저는 React 18, TypeScript, MUI 5, Storybook 6.5를 사용하고 있습니다.

내 MUI 테마에 사용자 정의 색상을 추가하고 내 Button 구성 요소의 색상 속성에 대한 Storybook의 드롭다운 옵션에 반영하려고 하는데 작동하지 않는 것 같습니다.

MUI 문서의 모듈 확장 가이드를 따랐으며, 하드코딩하면 MaterialButton 구성 요소가 "myCustomColor"를 허용하지만 Storybook에서는 색상 속성에 대한 드롭다운 선택 항목에 이를 표시하지 않습니다.

어떤 지침이나 아이디어라도 주시면 감사하겠습니다.

目前我的文件如下：

// src/styles/theme.ts
"@mui/material"에서 { createTheme }를 가져옵니다.

const 테마 내보내기 = createTheme({
  팔레트: {
    내사용자 정의 색상: {
      메인: '#ff5555',
      대비텍스트: '#fff',
    },
  },
});

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

모듈 '@mui/material/styles/createPalette' 선언 {
    인터페이스 팔레트 {
        myCustomColor: 팔레트['기본'];
    }
    인터페이스 PaletteOptions {
        myCustomColor?: PaletteOptions['primary'];
    }
}

모듈 '@mui/material/Button/Button' 선언 {
    인터페이스 ButtonPropsColorOverrides {
        myCustomColor: true;
    }
}

// src/comComponents/Button.tsx
"반응"에서 반응을 가져옵니다.
"@mui/material"에서 { Button as MaterialButton }을 가져옵니다.
"@mui/material"에서 가져오기 유형 { ButtonProps를 MuiButtonProps로 };

내보내기 인터페이스 ButtonProps는 MuiButtonProps를 확장합니다.
  라벨: 문자열;
  onClick: React.MouseEventHandler<HTMLButtonElement>
}

const Button = (props: ButtonProps) => {
  const { 라벨 } = 소품;
  return <MaterialButton {...props}>{label}</MaterialButton>
};

// .storybook/preview.js
"@mui/material"에서 { CssBaseline, ThemeProvider }를 가져옵니다.
"@storybook/react"에서 { 스토리 }를 가져옵니다.

"../src/styles/theme"에서 { 테마 }를 가져옵니다.

const 매개변수 내보내기 = {
  작업: { argTypesRegex: "^on[A-Z].*" },
  제어: {
    확장됨: true, // 설명 및 기본 열을 추가합니다.
    일치자: {
      색상: /(배경|색상)$/i,
      날짜: /날짜$/,
    },
  },
};

const withMuiTheme = (스토리) => {
  반품 (
    <ThemeProvider 테마={테마}>
      <CssBaseline />
      <스토리 />
    </테마 제공자>
  );
};

const 데코레이터 내보내기 = [withMuiTheme];

// .storybook/main.js
모듈.수출 = {
  스토리: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  애드온: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  프레임워크: "@storybook/react",
  핵심: {
    빌더: "@storybook/builder-webpack5",
  },
  타이프스크립트: {
    확인: 거짓,
    체크옵션: {},
    ReactDocgen: "react-docgen-typescript",
    ReactDocgenTypescriptOptions: {
      allowedSyntheticDefaultImports: false, // 스토리북 빌드 시간 단축
      esModuleInterop: false, // 스토리북 빌드 시간을 단축합니다.
      shouldExtractLiteralValuesFromEnum: true, // 변형 및 크기와 같은 공용체 소품 유형을 선택 컨트롤로 표시합니다.
      shouldRemoveUndefineFromOptional: true, // 정의되지 않은 문자열 및 부울 유형을 입력 및 스위치로 표시합니다.
      savePropValueAsString: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

Answer 1

우리는 Storybook argTypes를 사용하여 마침내 이 문제를 해결했습니다.
이는 누락된 값 문제를 해결하지만 우리가 이를 직접 정의하도록 강요합니다.

Storybook GH 저장소에 관련 질문이 있어 댓글을 남겼으나 아직 답변을 받지 못했습니다.

MUI 테마 팔레트 개체의 키를 사용하고 실제로 색상이 아닌 키를 필터링합니다.

으아악