无法使用MUI主题中的调色板颜色 [英] Cannot use palette colors from MUI theme

问题描述

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

推荐答案

是因为import@mui/system中的styled函数：

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

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

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

这篇关于无法使用MUI主题中的调色板颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！