在 MUI v5 中覆盖不同的排版样式答案

【问题标题】：Override Typography varient styles in MUI v5在 MUI v5 中覆盖不同的排版样式
【发布时间】：2022-01-13 03:49:54
【问题描述】：

我有一个与 Can't override root styles of Typography from Materil-UI 类似但不同的问题

在 v4 中我有一个主题：

import { createTheme } from '@material-ui/core/styles';

export const theme = createTheme({
  palette: {
    type: 'light'
  },
  typography: {
    fontFamily: ['Work Sans', 'sans-serif'].join(','),
    fontSize: 14,
    h1: {
      fontFamily: ['Rubik', 'sans-serif'].join(','),
      fontSize: 20
    },
    h2: {
      fontFamily: ['Rubik', 'sans-serif'].join(','),
      fontSize: 18
    },
    h3: {
      fontFamily: ['Rubik', 'sans-serif'].join(','),
      fontSize: 16
    },
    h4: {
      fontFamily: ['Rubik', 'sans-serif'].join(','),
      fontSize: 16
    }
  }
});

这很高兴地覆盖了<Typography variant='h2'>h2 heading</Typography> 的字体大小

在升级到 v5 时，此覆盖不再起作用

我也尝试在主题中添加组件部分

  components: {
    MuiTypography: {
      styleOverrides: {
        h2: {
          color: 'red',
          fontSize: '18px'
        }
      }
    }
  }

这也不起作用。

我注意到在 HTML 中添加了一个新类，它覆盖了所有以前的 CSS

需要什么才能按照 v4 覆盖所有 Typography 变体？ Extra class added 这不在 v4 HTML 中

【问题讨论】：

标签： css material-ui

【解决方案1】：

我已经解决了这个问题。在app.ts 我有

import { ThemeProvider } from '@mui/styles';

应该是什么时候

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

【讨论】：