MUI 5 如何全局自定义Typography字体与Palette配色方案

问题根源 #

你遇到的两个配置不生效的问题，核心原因是使用了styled-components作为MUI的样式引擎，但没有做对应的配套配置，导致MUI默认样式优先级高于自定义主题配置，出现覆盖问题。

完整通用配置方案 #

不需要逐个给组件配置defaultProps，按照以下步骤操作即可让全局字体、配色自动生效：

1. 先配置打包工具别名，避免MUI同时加载两套样式引擎
   如果你用webpack，在webpack.config.js中添加以下配置：

   module.exports = {
     resolve: {
       alias: {
         '@mui/styled-engine': '@mui/styled-engine-sc',
       },
     },
   };
   

   如果你用Vite，在vite.config.js中添加以下配置：

   export default defineConfig({
     resolve: {
       alias: {
         '@mui/styled-engine': '@mui/styled-engine-sc',
       },
     },
   });
   

2. 在应用最外层添加StyledEngineProvider和CssBaseline组件，调整样式优先级、初始化全局基础样式：

   import { createTheme, ThemeProvider, CssBaseline, StyledEngineProvider } from '@mui/material/styles';
   
   const theme = createTheme({
     typography: {
       fontFamily: myFontFamily,
     },
     palette: {
       primary: {
         main: myHexColor,
       },
       // 可继续配置secondary、error、warning、info、success等通用色，所有组件会自动适配
     }
   })
   
   const App = () => (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         {/* 此处放你所有的业务组件 */}
         <Typography>Hello, World</Typography>
         <Chip label="Hello, World" color="primary" />
       </ThemeProvider>
     </StyledEngineProvider>
   )
   

按照以上配置后，你在theme中定义的所有全局样式规则都会自动应用到所有MUI组件上，不需要逐个组件单独配置。

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