<p>저는 React 18, TypeScript, MUI 5, Storybook 6.5를 사용하고 있습니다. </p><p> 내 MUI 테마에 사용자 정의 색상을 추가하고 내 Button 구성 요소의 색상 속성에 대한 Storybook의 드롭다운 옵션에 반영하려고 하는데 작동하지 않는 것 같습니다. </p><p> MUI 문서의 모듈 확장 가이드를 따랐으며, 하드코딩하면 MaterialButton 구성 요소가 "myCustomColor"를 허용하지만 Storybook에서는 색상 속성에 대한 드롭다운 선택 항목에 이를 표시하지 않습니다. </p><p> 어떤 지침이나 아이디어라도 주시면 감사하겠습니다.</p> <p>目前我的文件如下：</p> <pre class="brush:php;toolbar:false;">// src/styles/theme.ts "@mui/material"에서 { createTheme }를 가져옵니다. const 테마 내보내기 = createTheme({ 팔레트: { 내사용자 정의 색상: { 메인: '#ff5555', 대비텍스트: '#fff', }, }, });</pre> <pre class="brush:php;toolbar:false;">// 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; } }</pre> <pre class="brush:php;toolbar:false;">// 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> };</pre> <pre class="brush:php;toolbar:false;">// .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];</pre> <pre class="brush:php;toolbar:false;">// .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), }, }, };</pre></p>