search

Home  >  Q&A  >  body text

How to use createTheme to define custom H1, H2, H3 styles in MaterialCSS

I have an application using NextJS and MaterialCSS and created the following theme:

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

I know how to override styles for Mui components. How do I define custom styles for the <h3> elements in my theme so that I have different h3 styles on dark themes and different h3 styles on light themes?

P粉549412038P粉549412038231 days ago1448

reply all(1)I'll reply

  • P粉364129744

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

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

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

    reply
    0
  • Cancelreply