设置 MUI Typography 的默认文本颜色

【问题标题】：Setting the default text color of MUI Typography设置 MUI Typography 的默认文本颜色
【发布时间】：2022-11-13 12:15:28
【问题描述】：

由于各种可用的示例，我对如何设置 MUI <Typography> 的样式有了很好的理解。我也了解如何定义和使用全局 MUI 主题。

但是 MUI <Typography> 是否有可能通过 color='text.primary'默认...？如果我不添加此属性，则颜色始终为黑色，而不是我为text.primary 设置的自定义颜色。

或者是始终覆盖/从不直接使用<Typography> 的首选方法，方法是定义一个特定于应用程序的组件，例如标准正文，以确保它具有正确的颜色？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果未提供，您可以让自己的组件默认传递首选颜色，这是一个名为 composition 的已知反应模式。

const MyTypography = ({color='text.primary', ...rest}) => (
  <Typography {...rest} color={color} />
)

您也可以将材质theme 配置为您的首选颜色，这里是the default theme

import type { Components,Theme } from "@mui/material";

export const MuiTypography = (theme: Theme): Components["MuiTypography"] => ({
  defaultProps: {
    color: "text.primary",
  },
});

const initialTheme = createMuiTheme({
    typography, // for font size and variants mapping
    // ... other theme config
});

const theme = createMuiTheme(initialTheme, {
    components: {
      MuiTypography: MuiTypography(initialTheme)
    }
})

【讨论】：