[React] Storybook에 MCI의 맞춤형 테마를 반영

Storybook에서 MCI의 사용자 정의 테마를 반영할 때 themeProvider 포위만으로는 반영할 수 없으며 설정을 변경해야 하기 때문에 공유합니다.

전제 조건

컨디션

package.json
package.json

{
  "name": "mui-storybook-sample",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.5.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-interactions": "^6.4.19",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/react": "^6.4.19",
    "@storybook/testing-library": "^0.0.9",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^1.0.7",
    "babel-loader": "^8.2.4",
    "typescript": "^4.5.4",
    "vite": "^2.8.0"
  }
}

환경 구축 로그

# react, typescript
$ npm create vite@latest mui-storybook-sample -- --template react-ts
$ cd mui-storybook-sample && npm i

# MUI install
$ npm install @mui/material @emotion/react @emotion/styled

# Storybook install
$ npx -p @storybook/cli sb init

MCI 주제 사용자 정의

이번에는 프라이머리 색상을 기본 파란색에서 녹색으로 바꿨습니다.
/src/theme.ts

import { createTheme } from "@mui/material/styles";
import { green } from "@mui/material/colors";

export const theme = createTheme({
  palette: {
    primary: {
      main: green[500],
    },
  },
});

App.tsx

App.tsx 이번 본질은 아니지만 쓰지 않아도 되지만 맞춤형 주제의 반영 방법으로 기재한다.
MUI에 사용자 정의 주제를 반영하려면 ThemeProvider 구성 요소를 사용하여 디스플레이 영역을 둘러야 합니다.
/src/App.tsx

import Button from "@mui/material/Button";
import { ThemeProvider } from "@mui/material/styles";

import { theme } from "./theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <Button variant="contained">Contained</Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

미리보기 후 다음과 같은 주 색조가 녹색인지 확인할 수 있습니다.

Storybook에 사용자 정의 주제 반영

이야기를 꾸미다

MUI 버튼을 표시하기 위해 Button.stories.tsx를 만듭니다.
!
일반적으로 UI 프레임워크의 구성 요소를 Storybook에 직접 표시하는 것은 공식 문서만 복사하기 때문에 이런 방법을 사용하지 않습니다.
이번에는 보도를 간소화하기 위해 MCI의 Buttton 구성 요소를 직접 게재할 예정이며, 원래 UI 프레임워크의 구성 요소를 이용하여 다시 만든 독립된 구성 요소이다.
/src/stories/Button.stories.tsx

import { ComponentStory, ComponentMeta } from "@storybook/react";

import Button from "@mui/material/Button";

export default {
  title: "MUI/Button",
  component: Button,
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  children: "Button",
  color: "primary",
  variant: "contained",
};

Button.stories.tsx가 생성되면 다음 명령을 사용하여 미리보기를 표시합니다.

$ npm run storybook

이렇게 하면 Buttton 구성 요소가 표시되지만 사용자 정의 테마가 반영되지 않으므로 사용자 정의 테마를 반영하는 설정이 추가됩니다.

사용자 정의 주제 반영하기

Storybook 설정.storybook 수정 디렉터리preciew.js와 main.js를 추가합니다.

preview.js에서 TheemeProvider 기술

Storybook의 인테리어 기능을 사용하여 Storybook의 전체 미리보기를 MUIThemeProvider 구성 요소로 둘러쌉니다.
/.storybook/preview.js

+ import { ThemeProvider } from "@mui/material/styles";
+ import { theme } from "/src/theme";

+ export const decorators = [
+   (Story) => {
+     return (
+       <ThemeProvider theme={theme}>
+         <Story />
+       </ThemeProvider>
+     );
+   },
+ ];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Material UI(v4 계열)까지 사용자 정의 테마를 반영했지만 MUI(v5 계열)부터는 main.js의 설정이 필요하다.

main.js 설정 변경

features 속성emotionAlias을 false로 설정합니다.
/.stories/main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
+ features: {
+   emotionAlias: false,
+ },
};

Ctrl+C를 사용하여 Storybook의 실시간 서버를 제거하고 다시 실행npm run storybook하면 다음과 같이 사용자 정의 테마를 반영한 미리 보기가 표시됩니다.