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，您只能为颜色分配intersect(intersect(intersect.... inherit primary secondary，可以通过以下方式服装default和primary secondary。

要将服装主题应用到组件中，请使用createMuiTheme：

MuiThemeProvider

因此，如果要生成绿色主题组件，则可以创建一个主题，然后使用<MuiThemeProvider theme={theme}> //your component </MuiThemeProvider>包装组件。

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

MuiThemeProvider

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

Answer 2

这不像只能做color="success"那样优雅，但是下面的代码将允许您做类似的事情：

<SuccessThemeProvider>
  <Button color="primary" variant="contained">
    Success
  </Button>
</SuccessThemeProvider>

这是完整的代码示例：

import React from "react";
import ReactDOM from "react-dom";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import green from "@material-ui/core/colors/green";
import Button from "@material-ui/core/Button";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#B31728"
    },
    secondary: {
      main: "#202833"
    },
    success: {
      main: green[500],
      contrastText: "#fff"
    }
  }
});
const successThemePalette = { primary: theme.palette.success };
const successTheme = createMuiTheme({ ...theme, palette: successThemePalette });
const SuccessThemeProvider = props => {
  return (
    <MuiThemeProvider theme={successTheme}>{props.children}</MuiThemeProvider>
  );
};
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="App">
        <Button color="primary" variant="contained">
          Primary
        </Button>
        <Button color="secondary" variant="contained">
          Secondary
        </Button>
        <SuccessThemeProvider>
          <Button color="primary" variant="contained">
            Success
          </Button>
        </SuccessThemeProvider>
      </div>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

2 个答案: