I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI
Back in v4, I had a theme set up like this:
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
}
}
});
Previously, this setup successfully overrode the font size for the
<Typography variant='h2'>h2 heading</Typography>However, after upgrading to v5, this override no longer functions as intended.
I attempted to address this by adding a components section to my theme:
components: {
MuiTypography: {
styleOverrides: {
h2: {
color: 'red',
fontSize: '18px'
}
}
}
}
Unfortunately, this solution also did not produce the desired result.
I have observed that a new CSS class is now being applied to the HTML, which overrides previous styling rules.
What steps are needed to ensure that all Typography variants are overridden as they were in v4? Newly added class This additional class was not present in v4's HTML structure