Encountering a common error in ReactJs projects:
Error: Material-UI: unsupported non-unitless line height with grid
alignment. Use unitless line heights instead.
A snippet of the code where the error occurs:
const breakpoints = createBreakpoints({});
let theme = createMuiTheme({
typography: {
allVariants: {
fontFamily
},
h1: {
fontWeight: 600,
fontSize: 26,
lineHeight: '32px',
[breakpoints.down("sm")]: {
fontSize: 18,
lineHeight: '26px',
}
},
h2: {
fontWeight: 600,
fontSize: 20,
lineHeight: 28 / 20
},
h3: {
fontWeight: 600,
fontSize: 16,
lineHeight: '22px',
[breakpoints.down("sm")]: {
fontSize: 14,
lineHeight: '20px',
}
}
}
})
The issue arises when attempting to set the lineHeight of h1 or h2 with a value in pixels, whereas it does not occur for h3 where line height is defined either in pixels or as unitless value.
To resolve the error caused by defining lineHeight for h1 in pixels, the following modification was made:
h1: {
fontWeight: 600,
fontSize: 26,
lineHeight: 32 / 26
},
Seeking insights into why this specific behavior occurs, as no relevant issues were found on StackOverflow.