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

Question

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

请一步一步解释我。

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

Answer 1

正如之前已经提到过的那样http://www.material-ui.com/#/customization/themes，但我想提供一些可能对初学者有用的简单步骤：

1主题创建

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

2应用主题

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

<MuiThemeProvider>
  <MyMaterialComponents />
</MuiThemeProvider>

所以你的下一步是：

import myTheme from './myTheme.json';

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

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