MUI文档查询：两处代码语法问题的对应文档位置

1. 自定义Theme中MuiTypography颜色语法错误修复 #

在自定义Theme时，针对MuiTypography的颜色覆盖需遵循styleOverrides的层级结构，正确写法示例：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        // 全局覆盖所有Typography的颜色
        root: {
          color: ({ theme }) => theme.palette.text.secondary,
        },
        // 针对特定variant单独设置颜色
        h1: {
          color: '#2d3748',
        },
      },
    },
  },
});

文档参考位置：MUI官方文档「自定义组件」板块下的「全局样式覆盖」章节，以及「Typography组件自定义」部分，明确了styleOverrides的结构规则和颜色属性的正确赋值方式。

2. Styled封装Typography时variant属性无效修复 #

使用styled封装Typography时，需通过attrs预设variant，或在组件使用时显式传递：

方式1：使用attrs预设variant #

import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

const StyledH2 = styled(Typography).attrs({
  variant: 'h2',
})(({ theme }) => ({
  marginBottom: theme.spacing(2),
  fontWeight: 600,
}));

// 使用
<StyledH2>自定义标题</StyledH2>

方式2：使用时显式传递variant #

const StyledTypography = styled(Typography)(({ theme }) => ({
  lineHeight: 1.6,
}));

// 使用
<StyledTypography variant="body1">正文内容</StyledTypography>

文档参考位置：MUI官方文档「Styled API」板块下的「传递props给基础组件」章节，以及「Typography组件API」中variant属性的说明部分，明确了styled组件处理内置props的正确方式。

内容的提问来源于stack exchange，提问作者LAFarmer