无法覆盖Material-UI中Typography组件的根样式如何解决

• MUI v5版本中@mui/styles提供的makeStyles属于遗留兼容方案，其注入的CSS优先级默认低于MUI核心组件的内置样式，你自定义的text类样式会被Typography组件的默认字体大小样式覆盖，因此无法生效。

下面按推荐优先级排序：

方案1：使用MUI v5官方推荐的sx属性（最简单） #

直接在Typography组件上通过sx属性编写样式，无需引入额外样式工具，默认优先级足够覆盖内置样式：

import React from 'react'
import { Typography } from "@mui/material";

function App() {
  return (
    <div className="App">
      <Typography sx={{ fontSize: 30 }}>Hello world</Typography>
    </div>
  );
}

export default App

方案2：使用styledAPI封装自定义组件 #

如果需要复用样式，用MUI v5自带的styled工具封装组件，样式优先级符合预期：

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

const CustomTypography = styled(Typography)(() => ({
  fontSize: 30,
}));

function App() {
  return (
    <div className="App">
      <CustomTypography>Hello world</CustomTypography>
    </div>
  );
}

export default App

方案3：强制提升makeStyles样式优先级（不推荐） #

如果必须保留makeStyles的写法，可以给样式加!important强制提升优先级：

const useStyles = makeStyles({
  text: {
    fontSize: '30px !important',
  },
});

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