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

Question

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

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

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

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

现在我如何访问 primary 的所有阴影我的组件内的调色板？访问 palette.grey 的所有阴影很简单，如下图所示:

但我似乎无法访问 primary 的阴影除了 main , dark , light , 和 contrastColor ， 如下所示:

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

Answer 1

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

我认为这里有一个误解。您已经可以访问主题颜色的变体( dark 、 light 、 contrastText )，但如果您的意思是来自颜色对象的所有阴影( blue[100] 、 blue[200] 、...)。那么没有， createMuiTheme()不会自动为您生成。
来自 Material-UI docs :

Only the main shades need be provided (unless you wish to furthercustomize light, dark or contrastText), as the other colors will becalculated by createMuiTheme(), as described in the Themecustomization section.

当您仅向 main 提供 1 种颜色时属性如下:

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

Material-UI 会计算 light , dark该颜色的变体以及 contrastText用于文本颜色。您可以登录 theme.palette.main确认这一点:

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

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

但是，如果您决定通过 color object :

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

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

然后 Material-UI 将找到该对象的主阴影。默认为 blue[500] ，并计算 dark , light和 contrastText基于 main颜色正常。最终结果将如下所示:

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

{
  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 用法
如 this问题指出，如果您使用的是 Typescript，您可能会意识到它没有为您提供主题中的阴影信息 PaletteColor .

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

维护者建议的解决方案是使用模块扩充来扩展 PaletteColor定义:

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

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

如果您正在使用 this linter 规则建议，以避免导入私有(private)模块(任何比 2 级导入更深的模块)。您可以创建 ColorPartial自己很容易像这样:

import { Color } from "@material-ui/core";

type ColorPartial = Partial<Color>;

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

现在 typescript 知道您 PaletteColor 中所有可能的阴影:

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

现场演示