Storybook控制項值中缺少自訂顏色的主題 - Material UI，TypeScript和Storybook的問題解決方案

Question

<p>我正在使用React 18，TypeScript，MUI 5和Storybook 6.5。 </p><p> 我試圖為我的MUI主題添加自訂顏色，並在Storybook的下拉選項中反映出來，用於我的Button元件的color屬性，但似乎不起作用。 </p><p> 我按照MUI文件中的模組擴充指南進行操作，當硬編碼時，MaterialButton元件確實接受"myCustomColor"，但是Storybook不會在color屬性的下拉選項中顯示它。 </p><p> 我會感激任何指導/想法。</p> <p>目前我的文件如下：</p>

// src/styles/theme.ts
從“@mui/material”導入{createTheme}；

匯出常數主題 = createTheme({
  調色盤：{
    我的自訂顏色：{
      主：'#ff5555'，
      對比文本：'#fff'，
    },
  },
});</pre>
// src/styles/expanded-theme.ts
導入“@mui/material/styles”；
導入“@mui/material/Button”；

聲明模組'@mui/material/styles/createPalette'{
    介面調色板{
        myCustomColor: 調色盤['primary'];
    }
    介面調色板選項{
        myCustomColor?: PaletteOptions['primary'];
    }
}

聲明模組 '@mui/material/Button/Button' {
    介面 ButtonPropsColorOverrides {
        我的自訂顏色：true；
    }
}</pre>
// src/components/Button.tsx
從“反應”導入反應；
從“@mui/material”導入{按鈕作為MaterialButton}；
從“@mui/material”導入類型 { ButtonProps as MuiButtonProps }；

匯出介面 ButtonProps 擴充 MuiButtonProps {
  標籤：字串；
  onClick: React.MouseEventHandler;
}

匯出 const Button = (props: ButtonProps) => {
  const { 標籤 } = 道具；
  return {label};
};</pre>
// .storybook/preview.js
從“@mui/material”導入{CssBaseline，ThemeProvider}；
從“@storybook/react”導入{故事}；

從“../src/styles/theme”導入{主題}；

導出常數參數 = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  控制：{
    Expanded: true, // 新增描述和預設列
    匹配器：{
      顏色：/（背景|顏色）$/i，
      日期：/日期$/，
    },
  },
};

導出 const withMuiTheme = (故事) => {
  返回 （
    
      >
      <故事情節>
    </主題提供者>
  ）；
};

導出 const 裝飾器 = [withMuiTheme];
;
// .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, // 使 union prop 類型（如變體和大小）顯示為選擇控件
      shouldRemoveUndefineFromOptional: true, // 使可以未定義的字串和布林類型顯示為輸入和開關
      savePropValueAsString：true，
      propFilter: (prop) =>; (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};</pre></p>

Answer 1

我們最終透過使用Storybook argTypes來解決了這個問題。
這解決了缺失值的問題，但是迫使我們自己定義它們。

Storybook的GH倉庫上有一個相關問題，我發表了評論，但還沒有得到任何答案。

我們正在使用MUI主題調色板物件的鍵，並過濾掉我們知道實際上不是顏色的鍵：

import { theme } from './theme';

const paletteKeysThatAreNotColors = [
  'mode',
  'common',
  'grey', // 这虽然有一个颜色的名字，但实际上不是颜色 :shrug:
  'contrastThreshold',
  'getContrastText',
  'augmentColor',
  'tonalOffset',
  'text',
  'divider',
  'background',
  'action',
];

const colors = Object.keys(theme.palette).filter(
  (colorKey) => !paletteKeysThatAreNotColors.includes(colorKey),
);
export default colors;