Material-UI：如何访问组件内的所有调色板阴影

Question

为了自定义我的 Material UI 调色板，我做了这样的事情来设置我的主题：

import blue from '@material-ui/core/colors/blue';

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

blue 包含许多阴影，如下所示：

现在如何访问primary组件内的所有调色板阴影？访问所有阴影palette.grey很容易，如下所示：

但我似乎无法访问, , , 和primary以外的阴影，如下所示：maindarklightcontrastColor

如何theme.palette.primary.A100从我的组件访问所有阴影（例如）？

Answer 1

Now how do I access all the shades of primary palette inside of my component?

I think there is a misunderstanding here. You can already access variants of the theme color (dark, light, contrastText), but if what you mean is all shades from the color object (blue[100], blue[200],...). Then no, createTheme() does not generate that for you automatically.

From Material-UI docs:

Only the main shades need be provided (unless you wish to further customize light, dark or contrastText), as the other colors will be calculated by createTheme(), as described in the Theme customization section.

When you supply only 1 color to the main property like below:

const theme = createTheme({
  palette: {
    primary: {
      main: "#607d8b"
    }
  }
});

Material-UI will calculate the light, dark variants of that color along with contrastText for the text color. You can log the theme.palette.main to confirm this:

const useStyles = makeStyles((theme) => {
  console.log(theme.palette.main);
  return {};
});

{
  main: "#607d8b",
  light: "rgb(127, 151, 162)",
  dark: "rgb(67, 87, 97)",
  contrastText: "#fff",
}

If you however decide to pass a color object:

{
  main: "#607d8b",
  light: "rgb(127, 151, 162)",
  dark: "rgb(67, 87, 97)",
  contrastText: "#fff",
}

Then Material-UI will find the main shade of that object. Default is blue[500], and calculate the dark, light and contrastText based on the main color as normal. The end result will look like this:

import { createTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

const theme = createTheme({
  palette: {
    primary: blue,
  },
});

{
  50: "#eceff1",
  100: "#cfd8dc",
  200: "#b0bec5",
  300: "#90a4ae",
  400: "#78909c",
  500: "#607d8b", // createPalette() uses this color as main
  600: "#546e7a",
  700: "#455a64",
  800: "#37474f",
  900: "#263238",
  A100: "#cfd8dc",
  A200: "#b0bec5",
  A400: "#78909c",
  A700: "#455a64",
  main: "#607d8b", // added from createPalette()
  light: "#90a4ae", // added from createPalette()
  dark: "#455a64", // added from createPalette()
  contrastText: "#fff", // added from createPalette()
}

Typescript Usage

As this issue points out, if you are using Typescript, you may realize that it does not give you the shades information in the theme PaletteColor.

const useStyles = makeStyles((theme) => {
  console.log(theme.palette.main);
  return {};
});

The solution as the maintainer suggested is to use module augmentation to extend the PaletteColor definition:

{
  50: "#eceff1",
  100: "#cfd8dc",
  200: "#b0bec5",
  300: "#90a4ae",
  400: "#78909c",
  500: "#607d8b", // createPalette() uses this color as main
  600: "#546e7a",
  700: "#455a64",
  800: "#37474f",
  900: "#263238",
  A100: "#cfd8dc",
  A200: "#b0bec5",
  A400: "#78909c",
  A700: "#455a64",
  main: "#607d8b", // added from createPalette()
  light: "#90a4ae", // added from createPalette()
  dark: "#455a64", // added from createPalette()
  contrastText: "#fff", // added from createPalette()
}

If you are using this linter rule suggestion to avoid importing private modules (anything deeper than 2 level imports). You can create ColorPartial yourself easily like this:

const useStyles = makeStyles((theme) => {
  const shade = theme.palette.main[500]; // shade is any instead of string
  return {};
});

Now typescript is aware of all possible shades in your PaletteColor:

import { ColorPartial } from "@material-ui/core/styles/createPalette";

declare module "@material-ui/core/styles/createPalette" {
  interface PaletteColor extends ColorPartial {}
}

Live Demo