reactjs - 如何在 Material-UI 调色板的主要、浅色和深色差异之间切换

Question

假设我使用 Material-UI 调色板，如下所示:

  palette: {
    primary: {
      main: "#039be5",
      light: "#63ccff",
      dark: "#C218006db35B",
      contrastText: "#fafafa"
    },
    secondary: {
      main: "#f50057",
      light: "#ff5983",
      dark: "#bb002f",
      contrastText: "#f9fbe7"
    },
    error: {
      main: "#f50057",
      light: "#ff5983",
      dark: "#bb002f",
      contrastText: "#f9fbe7"
    }
  },

假设我正在使用许多 Material-UI 组件，例如 <AppBar /> , <Button />等等，我想给他们每个人主要调色板对象的不同口音 - 例如。 <AppBar />将是primary.main和<Button />将是primary.light 。

我该怎么做？

使用类似 <AppBar position="static" color="primary.light"> 的内容不起作用，并抛出错误。

Answer 1

不幸的是，文档不清楚。这是我发现的唯一的解决方法:

<AppBar position="static" className="primaryLight">

const styles = theme => ({
  primaryLight: {
    backgroundColor: theme.palette.primary.light
  }
}

这个库很复杂......至少它与 React 一致!