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

Question

我花了几天时间试图自定义主颜色，并在调色板上再添加两种颜色。我现在能够正确地声明新的colors...but，看到按钮上反射的新颜色不起作用。即使我在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;

这就是默认按钮样式的样子

主题提供者自定义调色板

正如您可能看到的，ThemeProvider有调色板颜色的definition...but --有些按钮不接受它。提前感谢

Answer 1

编辑:这个问题似乎与stackoverflow.com.com/a/70254078/17724218有关，如下所示。

Answer 2

把这个添加到.storybook/preview.js中就足够解决我的案子了。请按照这件事上的官方迁移指南学习更多信息。

//.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.