Как я могу получить доступ к более светлым или темным оттенкам моей палитры Material-UI?

Question

В соответствии с документацией я создал палитру Material-UI с различными оттенками и оттенками синего и красного. Я хотел бы иметь возможность доступа к этим различным оттенкам при создании компонентов.

Например, когда я создаю кнопку, <Button variant="contained" color="primary">click</Button>, есть ли способ указать Material-UI использовать облегченную версиюосновной цвет?

Answer 1

Вы можете передать оттенок непосредственно в свойство style :

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

const primaryLight = red["A100"];

...

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

Или, если хотите создать тему :

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;

Демо:

Answer 2

Вы можете попробовать изменить объект темы, который вы предоставляете своему ThemeProvider, в зависимости от вашего выбора и / или пользователя, изменив атрибут type в вашей палитре. Тогда я бы предложил предоставить разные ThemeProviders для частей, которые вы хотите светлые или темные:

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

К документации