文章/答案/技术大牛

发布

社区首页 >问答首页 >覆盖MUI v5中的排版变体样式

问覆盖MUI v5中的排版变体样式
EN

Stack Overflow用户

提问于 2021-12-08 06:33:32

回答 2查看 2.4K关注 0票数 0

我有一个类似的，但与无法覆盖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一样过度？添加额外的类 --这不是v4 HTML中的

css

material-ui

回答 2

Stack Overflow用户

发布于 2021-12-09 03:20:59

我已经想出了这个问题。在app.ts我有

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

当它应该是

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

票数 1

Stack Overflow用户

发布于 2022-09-22 15:06:19

使用样式重写，您可以重写一个变体，如下所示：

export const theme = createTheme({
  components: {
    MuiTypography: {
      variants: [
        {
          props: { variant: 'h2' }, /* component props */
          style: {
            /* your style here: */
            color: 'red',
          },
        },
      ],
    },

这对我有用。我希望它能帮助你:)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70270860

复制

相似问题

问覆盖MUI v5中的排版变体样式
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖MUI v5中的排版变体样式EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖MUI v5中的排版变体样式
EN