在MaterialCSS中使用createTheme定义自定义的H1、H2、H3样式的方法-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

在MaterialCSS中使用createTheme定义自定义的H1、H2、H3样式的方法

P粉549412038 2024-04-05 12:38:32

[CSS3讨论组]

1547

我有一个使用NextJS和MaterialCSS的应用程序，并创建了以下主题：

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

export const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          color: 'white',
        },
      },
    },
  },
});

export const lightTheme = createTheme({
  palette: {
    mode: 'light',
  },
});

我知道如何为Mui组件覆盖样式。如何为我的主题中的<h3>元素定义自定义样式，以便在暗主题上具有不同的h3样式而在亮主题上具有不同的h3样式？

P粉549412038

全部回复(1)

P粉3641297442024-04-06 00:15:07 1楼

const theme = createTheme({
  typography: {
    h3: {
      fontSize: 30,
    },
    subtitle1: {
      fontSize: 12,
    },
    body1: {
      fontWeight: 500,
    },
    button: {
      fontStyle: 'italic',
    },
  },
});

文档：
https://mui.com/material-ui/customization/typography/#variants