So verwenden Sie createTheme, um benutzerdefinierte H1-, H2- und H3-Stile in MaterialCSS zu definieren

Question

Ich habe eine Anwendung, die NextJS und MaterialCSS verwendet, und habe das folgende Theme erstellt:

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',
  },
});

Ich weiß, wie man Stile für Mui-Komponenten überschreibt. Wie definiere ich benutzerdefinierte Stile für die <h3>-Elemente in meinem Theme, sodass ich unterschiedliche h3-Stile für dunkle Themes und unterschiedliche h3-Stile für helle Themes habe?

Answer 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