Saturday, June 21, 2025
HomeCSScss - Customized typography for MUI

css – Customized typography for MUI


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?

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments