Storybook コントロール値にカスタム カラーが欠落しているテーマ - マテリアル UI、TypeScript、Storybook の問題の解決策

Question

React 18、TypeScript、MUI 5、Storybook 6.5 を使用しています。

MUI テーマにカスタム カラーを追加し、それを Storybook の Button コンポーネントの color プロパティのドロップダウン オプションに反映させようとしていますが、機能しないようです。

MUI ドキュメントのモジュール拡張ガイドに従いました。ハードコーディングすると、MaterialButton コンポーネントは「myCustomColor」を受け入れますが、Storybook では color プロパティのドロップダウン選択にそれが表示されません。

ご指導/アイデアをいただければ幸いです。

前の私の文章如下：

// src/styles/theme.ts
import { createTheme } から "@mui/material";

エクスポート const テーマ = createTheme({
  パレット: {
    myCustomColor: {
      メイン: '#ff5555',
      コントラストテキスト: '#fff',
    }、
  }、
});

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

モジュール '@mui/material/styles/createPalette' を宣言 {
    インターフェイス パレット {
        myCustomColor: パレット['primary'];
    }
    インターフェース PaletteOptions {
        myCustomColor?: PaletteOptions['primary'];
    }
}

モジュール '@mui/material/Button/Button' を宣言 {
    インターフェース ButtonPropsColorOverrides {
        myCustomColor: true;
    }
}

// src/components/Button.tsx
「反応」から React をインポートします。
import { Button as MaterialButton } from "@mui/material";
import type { ButtonProps as MuiButtonProps } from "@mui/material";

エクスポートインターフェイス ButtonProps は MuiButtonProps を拡張します {
  ラベル: 文字列;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

エクスポート const Button = (props: ButtonProps) => {
  const { ラベル } = 小道具;
  return <マテリアルボタン {...props}>{ラベル}</マテリアルボタン>;
};

// .storybook/preview.js
import { CssBaseline, ThemeProvider } from "@mui/material";
import { Story } から "@storybook/react";

import { テーマ } から "../src/styles/theme";

エクスポート定数パラメータ = {
  アクション: { argTypesRegex: "^on[A-Z].*" },
  コントロール: {
    Expanded: true, // 説明とデフォルトの列を追加します
    マッチャー: {
      色: /(背景|色)$/i、
      日付: /Date$/、
    }、
  }、
};

import const withMuiTheme = (ストーリー) => {
  戻る （
    <ThemeProvider テーマ={テーマ}>
      <CssBaseline />
      <ストーリー/>
    </ThemeProvider>
  );
};

import const デコレータ = [withMuiTheme];

// .storybook/main.js
module.exports = {
  ストーリー: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"]、
  アドオン: [
    "@storybook/アドオンリンク",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ]、
  フレームワーク: "@storybook/react",
  芯： {
    ビルダー: "@storybook/builder-webpack5",
  }、
  タイプスクリプト: {
    チェック: false、
    checkOptions: {}、
    反応Docgen: "react-docgen-typescript",
    反応DocgenTypescriptOptions: {
      allowSyntheticDefaultImports: false, // ストーリーブックのビルド時間を短縮します
      esModuleInterop: false, // ストーリーブックのビルド時間を短縮します
      shouldExtractLiteralValuesFromEnum: true, // バリアントやサイズなどの共用体プロパティの型を選択コントロールとして表示します
      shouldRemoveUnknownFromOptional: true, // 未定義にできる文字列およびブール型を入力およびスイッチとして表示します
      savePropValueAsString: true、
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    }、
  }、
};

Answer 1

最終的には、Storybook argTypes を使用することでこの問題を解決しました。
これにより欠損値の問題は解決されますが、値を自分で定義する必要があります。

Storybook の GH リポジトリに 関連の質問 があり、コメントを残しましたが、まだ返信がありません。

MUI テーマ パレット オブジェクトのキーを使用し、実際には色ではないことがわかっているキーを除外しています。

リーリー