如何访问 Material-UI 调色板的浅色或深色？答案

【问题标题】：How can I access lighter or darker shades of my Material-UI palette?如何访问 Material-UI 调色板的浅色或深色？
【发布时间】：2019-10-29 16:53:03
【问题描述】：

根据documentation，我创建了一个具有不同色调以及蓝色和红色阴影的 Material-UI 调色板。我希望在创建组件时能够访问这些不同的阴影。

例如，当我创建一个按钮时，<Button variant="contained" color="primary">click</Button>，有没有办法告诉 Material-UI 使用原色的浅色版本？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以将 hue 直接传递给 style 属性：

import red from "@material-ui/core/colors/red";

const primaryLight = red["A100"];

...

<Button variant="contained" style={{ backgroundColor: primaryLight }}>click</Button>

或者如果你想创建一个theme：

index.js

import React from "react";
import ReactDOM from "react-dom";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import red from "@material-ui/core/colors/red";
import MyComponent from "./MyComponent";

const primary = red[500];
const primaryLight = red["A100"];

const theme = createMuiTheme({
  palette: {
    primary: {
      light: primaryLight,
      main: primary
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <MyComponent />
      </div>
    </ThemeProvider>
  );
}

Mycomponent.js

import React from "react";
import { useTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

function MyComponent() {
  const theme = useTheme();
  const primaryLight = theme.palette.primary.light;

  const styles = {
    button: {
      backgroundColor: primaryLight,
    },
  }

  return (
    <Button variant="contained" style={styles.button}>click</Button>
  )
}

export default MyComponent;

演示：

【讨论】：

【解决方案2】：

您可以尝试通过修改调色板中的type 属性来根据您和/或用户的选择来修改您提供给 ThemeProvider 的主题对象。然后我建议为您想要浅色或深色的部分提供不同的 ThemeProviders：

const theme = createMuiTheme({
  palette: {
    type: 'dark', // or light
    // ... your colors & shades of dark/light
  },
});

To the documentation

【讨论】：