reactjs - 在主题 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分配给颜色，您可以自定义通过 createMuiTheme 实现primary 和 secondary。

要将自定义主题应用到组件中，请使用 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>
  );
}

进一步阅读:Customize Material-UI with your theme