不能使用MUI主题中的调色板颜色

Question

我想在自定义表单元素中使用默认的Material UI主题颜色:

import * as React from 'react';
import { styled } from '@mui/system';
const MyComponent = styled('div')(({theme}) => ({
color: 'darkslategray',
padding: theme.spacing(8),
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.primary.main,
}));
export default function BasicUsage() {
return <MyComponent>Styled div</MyComponent>;
}

https://codesandbox.io/s/hwpzf?file=/demo.tsx

返回错误:

无法读取未定义的属性(读取'main')

我可以使用主题提供的默认间距值或borderRadius，但不能使用调色板。

Answer 1

这是因为您从@mui/system导入了styled函数:

import { styled } from '@mui/system';

'@mui/system'的样式API没有默认主题，所以您需要自己创建一个主题并在ThemeProvider中注册。如果您希望使用材质默认主题而不编写额外的代码，请使用'@mui/material/styles':

import { styled } from "@mui/material/styles";