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 颜色导入的 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;

这也行不通。

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

如果有，怎么做？

谢谢。

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