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