无法使用 MUI 主题中的调色板颜色答案

【问题标题】：Cannot use palette colors from MUI theme无法使用 MUI 主题中的调色板颜色
【发布时间】：2021-09-30 21:31:11
【问题描述】：

我想在自定义表单元素中使用默认的 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，但不能使用调色板。

【问题讨论】：

您应该从@mui/material/styles 导入styled 而不是@mui/system 才能访问默认主题。见：mui.com/system/styled/#import-path

标签： reactjs material-ui

【解决方案1】：

这是因为你 import 来自 styled 的函数 @mui/system:

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

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

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

【讨论】：