Storybook 擴充功能 Material-UI 模式

一個提供 UI 來在淺色/深色之間切換狀態的擴充功能。

適用於 material-ui v4、v5

使用方式

在 .storybook/preview.js 或故事中建立裝飾器。

// .storybook/preview.js
import { useMemo } from "react";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

const withMuiTheme = (Story, context) => {
  const mode = context.globals?.muiMode;
  const theme = useMemo(() => createMuiTheme({
    palette: {
      mode, // for v5
      // type: mode // for v4
    }
  }), [mode])
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
    </MuiThemeProvider>
  )
}