Material-UI颜色属性选项

Question

我目前使用material-ui有以下主题：

import { createMuiTheme } from "@material-ui/core/styles";
import { blue, green } from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: green,
  },
});

export default theme;

现在，如果我对从material-ui colors导入的green对象执行console.log，我会得到一个如下所示的颜色对象：

green = {
  50: "#e8f5e9"
  100: "#c8e6c9"
  200: "#a5d6a7"
  300: "#81c784"
  400: "#66bb6a"
  500: "#4caf50"
  600: "#43a047"
  700: "#388e3c"
  800: "#2e7d32"
  900: "#1b5e20"
  A100: "#b9f6ca"
  A200: "#69f0ae"
  A400: "#00e676"
  A700: "#00c853"
}

因此，我想我可以像下面这样设计我的AppBar组件：<AppBar color="secondary.800">。

然而，这是行不通的。我也尝试过：<AbbBar color="secondary[800]">，但同样不起作用。

我甚至尝试了这个主题的变体：

import { createMuiTheme } from "@material-ui/core/styles";
import { blue, green } from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: {...green},
  },
});

export default theme;

这也不起作用。

有没有办法让我通过AppBar组件中的color属性访问green颜色对象中的不同颜色变化？

如果是这样的话，是怎么做的？

谢谢。

Answer 1

使用Material UI无法完成您想要做的事情。您只能设置颜色变体(主要或次要)，颜色将从您的主题中提取。

要手动设置不同的颜色，您需要覆盖组件的样式。

import { withStyles } from "@material-ui/core/styles";
import { blue } from "@material-ui/core/colors";

const MyChildComponent = ({ classes }) => <AppBar classes= {{ root: classes.root }} />

const styles = () => ({
  root: {
     backgroundColor: blue[400],
  }
});

export default withStyles(styles)(MyChildComponent);

--------

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

const MyParentComponent = ({ classes }) => <MyChildComponent classes={{ root: classes.someClass}} />

const styles = () => ({
  someClass: {
     backgroundColor: green[400],
  }
});

export default withStyles(styles)(MyParentComponent);

当然，您可以定义一些内部逻辑，以根据您向下传递的一些属性来决定在您的子组件中应用哪个类。

import clsx from "clsx";
import { withStyles } from "@material-ui/core/styles";
import { red, green, blue } from "@material-ui/core/colors";

const MyChildComponent = ({ color, classes }) => <AppBar className={clsx({
   [classes.red]: color === "red",
   [classes.blue]: color === "blue,
   [classes.green]: color === "green",
})}/>

const styles = () => ({
  red: {
     backgroundColor: red[400],
  },
  green: {
     backgroundColor: green[400],
  },
  blue: {
     backgroundColor: blue[400],
  },
});

export default withStyles(styles)(MyChildComponent);

--------

const MyParentComponent = () => <MyChildComponent color="red"/>

export default MyParentComponent;

就我个人而言，我只会手动覆盖上面所示的类。

Answer 2

根据Material UI documentation，您可以使用数组表示法访问颜色变化，并定义如下主题

const theme = createMuiTheme({
  palette: {
    primary: {
      main: blue[600]
    },
    secondary: {
      main: green[800]
    }
  }
});

工作代码沙箱链接：https://codesandbox.io/s/material-colors-9hnqh?file=/src/App.js