react material-ui v5 主题不适用于故事书

Question

我花了几天时间尝试自定义主要颜色并向调色板添加另外两种颜色。我能够正确地声明新颜色......但是目前看到按钮上反映的那些新颜色不起作用。即使我包装在 Themeprovider 下，该按钮也采用默认属性。我正在使用故事书。

import React from "react";
import { Meta } from "@storybook/react/types-6-0";
import { Button } from "@mui/material";
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';


const theme = createTheme({
  palette: {
    primary: {
      contrastText: "#ff0000",
      light: "#ff0000",
      main: "#ff0000",
      dark: "#ff0000"
    },
    tertiary: {
      main: "#ff0000"
    },
    failure: {
      main: "#ff0000"
    }
  }
});

const CustomStyles = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Click me</Button>
    </ThemeProvider>
  );
}


const Template = () => {
  return (
    <CustomStyles />
  );
};

export const Default = Template.bind({});

export default {
  title: "mylib/Theme"
} as Meta;

这是它的样子 default button style

Themeprovider custom palette

如您所见，ThemeProvider 具有调色板颜色定义...但有些按钮不接受它。提前致谢

Answer 1

编辑：这个问题似乎与 Whosebug 有关。com/a/70254078/17724218 正如 OP 在下面评论的那样。

Answer 2

将此添加到.storybook/preview.js 足以解决我的问题。按照 this matter 上的官方迁移指南了解更多信息。

//.storybook/preview.js
    
 import { ThemeProvider } from '@mui/material/styles';
 import { ThemeProvider as Emotion10ThemeProvider } from 'emotion-theming';
 import { theme } from '../your/system/customTheme/path';
        
   const defaultTheme = theme;
        
    const withThemeProvider = (Story, context) => {
       return (
          <Emotion10ThemeProvider theme={defaultTheme}>
             <ThemeProvider theme={defaultTheme}>
               <Story {...context} />
             </ThemeProvider>
           </Emotion10ThemeProvider>
         );
     };
        
   export const decorators = [withThemeProvider];

   //another storybook exports.

react material-ui v5 主题不适用于故事书

react material-ui v5 theming doesnt work with storybook

reactjs

material-ui

styling

storybook

themeprovider