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粉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