在主题 Material UI React 中设置其他颜色

Question

我正在尝试查找文档或代码示例，如何在 Material UI 主题中指定附加颜色。

现在我有以下主题配置

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#B31728"
        },
        secondary: {
            main: "#202833"
        }
    },
    ...

现在我有一个案例，我想使用颜色进行成功的操作，例如

import { green } from "@material-ui/core/colors";

<Fragment>
    {isVerified ? (
        <VerifiedUser style={{ color: green[500] }} />
    ) : (
        <Error color="primary" />
    )}
</Fragment>

我想以设置错误图标的相同方式设置VerifiedUser图标的颜色。但是主题调色板配置只有主要和次要目的。如何设置颜色让我说“成功”，这样我就可以像

<VerifiedUser color="success" />

Answer 1

对于Material-UI，只能指定inherit primary secondary default颜色，可以自定义primary并secondary通过createMuiTheme.

要将自定义主题应用到组件中，请使用MuiThemeProvider：

<MuiThemeProvider theme={theme}>
  //your component
</MuiThemeProvider>

因此，如果你想生成绿色主题组件，你可以创建一个主题，然后用它MuiThemeProvider来包装你的组件。

代码示例（生成绿色按钮）：

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: { main: '#00FF00' }
});

function GreenButton() {
  return (
    <MuiThemeProvider theme={theme}>
      <Button color="primary">This is green button</Button>
    </MuiThemeProvider>
  );
}

进一步阅读：根据您的主题自定义 Material-UI