0

我花了几天时间尝试自定义原色并在调色板中添加另外两种颜色。我能够正确地声明新颜色......但目前看到按钮上反映的那些新颜色不起作用。即使我包裹在 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 自定义调色板

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

4

2 回答 2

0

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

于 2021-12-20T16:55:33.290 回答
0

添加这个.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.
于 2022-02-25T11:22:13.537 回答