如何为 Material UI 应用自定义颜色主题答案

【问题标题】：How to apply custom color theme for Material UI如何为 Material UI 应用自定义颜色主题
【发布时间】：2017-01-04 09:40:36
【问题描述】：

我正在尝试为我正在使用 Material UI 的 React Js 应用程序应用我的自定义主题。

请一步一步解释。

我是 ReactJs 和 Material UI 的新手。这是我的第一个项目。请帮帮我。

【问题讨论】：

【解决方案1】：

正如已经提到的，有关于此 http://www.material-ui.com/#/customization/themes 的文档，但我想提供一些简单的步骤，可能对初学者有用：

您可以使用storybook-addon-material-ui 项目来创建您的主题。最快的方法是在demo page 上完成，然后将您的主题下载为 JSON 文件。

我假设你已经有了这样的结构：

<MuiThemeProvider>
  <MyMaterialComponents />
</MuiThemeProvider>

所以你的下一步是：

import myTheme from './myTheme.json';

<MuiThemeProvider muiTheme={myTheme}>
  <MyMaterialComponents />
</MuiThemeProvider>

但请注意，如果您的<MyMaterialComponents /> 主题设置中有非物质组件，则不会影响它们。如果之后您仍有疑问，您可能会发现有用的 react-theming 项目

2020 年更新

【讨论】：