I need to set a property typography.h1.fontSize="clamp(24px, calc(24px + (40 - 24) * ((100vw - 768px) / (1920 - 768))), 40px)"
createTheme =({
typography:{
fontFamily: 'Circe, sans-serif',
allVariants: {
textTransform: 'unset',
lineHeight: 1.2,
},
h1: {
fontWeight: 'daring',
lineHeight: 1.14,
fontSize: 'clamp(24px, calc(24px +(40 - 24)*((100vw - 768px) /(1920 - 768))), 40px)',
},
fontWeightBold: 700,
fontWeightMedium: 500,
fontWeightRegular: 400,
}});
All the pieces works, however the fontSize
subject within the parts inspector is put in equal to font-size: NaNrem
and in consequence, font-size is taken by default 2em
. On the similar time, the inspector exhibits that CSS has a variable --mui-font-h1: daring clamp(24px, calc(24px +(40 - 24)*((100vw - 768px) /(1920 - 768))), 40px)/1.14 Circe,sans-serif
.
It’s partially attainable to avoid this downside by conveying the fontSize
worth moreover in elements.MuiTypography.styleOverrides.h1.fontSize
, however this solely works if the worth of typogtaphy.р1.fontSize
is outlined as NaNrem.
So far as I perceive the error, when the set up of the fontSize
parameter is combed within the variable “Mui-font-h1`, are there any methods to resolve this downside?