现在我该如何在我的组件中访问主色调的所有阴影?我认为这里有一个误解。您已经可以访问主题颜色的变体(
dark
,
light
,
contrastText
),但如果您指的是来自颜色对象的所有阴影(
blue[100]
,
blue[200]
,...)。那么不,
createTheme()
不会自动为您生成它。
来自 Material-UI
docs 的信息:
只需要提供主要色调即可(除非您希望进一步自定义
light
,
dark
或
contrastText
),因为其他颜色将由
createTheme()
计算,如主题自定义部分所述。
当您仅向
main
属性提供 1 种颜色时:
const theme = createTheme({
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",
}
如果您决定传递一个
颜色对象:
import { createTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
const theme = createTheme({
palette: {
primary: blue,
},
});
然后Material-UI将查找该对象的主要色调。默认值为
blue[500]
,并根据
main
颜色正常计算
dark
、
light
和
contrastText
。最终结果看起来像这样:
const useStyles = makeStyles((theme) => {
console.log(theme.palette.main);
return {};
});
{
50: "#eceff1",
100: "#cfd8dc",
200: "#b0bec5",
300: "#90a4ae",
400: "#78909c",
500: "#607d8b",
600: "#546e7a",
700: "#455a64",
800: "#37474f",
900: "#263238",
A100: "#cfd8dc",
A200: "#b0bec5",
A400: "#78909c",
A700: "#455a64",
main: "#607d8b",
light: "#90a4ae",
dark: "#455a64",
contrastText: "#fff",
}
使用Typescript
正如this问题所指出的那样,如果你正在使用Typescript,你可能会意识到它没有在主题PaletteColor
中提供给你阴影信息。
const useStyles = makeStyles((theme) => {
const shade = theme.palette.main[500];
return {};
});
维护者建议的解决方案是使用“模块增强”来扩展
PaletteColor
的定义:
import { ColorPartial } from "@material-ui/core/styles/createPalette";
declare module "@material-ui/core/styles/createPalette" {
interface PaletteColor extends ColorPartial {}
}
如果您正在使用
this 代码检查建议来避免导入私有模块(任何深度超过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];
return {};
});
演示
![Edit 67013112/material-ui-how-to-access-all-palette-shades-inside-component](https://codesandbox.io/static/img/play-codesandbox.svg)
theme.palette.primary[500]
顶部添加//@ts-ignore
才能让它工作,否则就会出现以下错误:Element implicitly has an 'any' type because expression of type '500' can't be used to index type 'PaletteColor'. TS7053
。您的 codesandbox 似乎没有这个问题。你是怎么让 TypeScript 允许在PaletteColor
上使用500
索引器的? - Johnny Oshika//@ts-ignore
,否则它甚至无法运行。https://codesandbox.io/s/material-ui-access-all-palette-shades-inside-components-gimgx?file=/src/demo.tsx - Johnny OshikaPaletteColor
。请参考这个示例。如果您需要PaletteColor
扩展的示例,请联系我。 - NearHuscarlprimaryShades
),但是当我想将标准名称(如primary
)作为Color
进行增强时,它就无法工作,因为它已经被定义为PaletteColor
。我得到的错误是:后续属性声明必须具有相同的类型。属性'primary'的类型必须为'PaletteColor',但此处的类型为'Color'。ts(2717)
- Johnny OshikaprimaryShades
),它运行得足够好。但使用默认的primary
会更好。 - Johnny Oshika