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

【问题标题】：react material-ui v5 theming doesnt work with storybookreact material-ui v5 主题不适用于故事书
【发布时间】：2022-01-22 02:44:54
【问题描述】：

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

【问题讨论】：

标签： reactjs material-ui styling storybook themeprovider

【解决方案1】：

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

【讨论】：

我想做这样的事情。 codesandbox.io/s/… 可以看到，没有任何styleOverrides，我需要使用颜色定义（主要、次要、成功等）
再一次，只是改变palette 中的颜色（主要、次要、成功等），不会同时改变按钮颜色。要更改按钮的颜色，您需要在主题中提供全局覆盖，使用sx 属性进行一次性更改，或者使用styled 方法进行可重用的自定义按钮。您链接到的代码框正在使用styled 方法。
我还编辑了我的答案，展示了一个使用styled 方法使用palette 中的颜色自定义按钮的示例。
对不起，我分享了一个错误的... codesandbox.io/s/… 感谢您的帮助。我想有一种直接的方法可以自定义主题，只需更改调色板就足够了。我找到了一个对我帮助很大的帖子。 stackoverflow.com/a/70254078/17724218
是的，你是对的，我错了。（刚刚在我的自定义主题中尝试过）。如果您想仅更改按钮中的颜色，那么更改调色板就足够了。如果您还需要其他更改（borderRadius 等），那么您需要样式覆盖或styled。我会相应地编辑我的答案））