CODEWITHSUNDEEP
cssreactjsmaterial-ui
legkiy
legkiy

Reputation: 21

Custom typography for MUI

I want 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: 'bold',
    lineHeight: 1.14,
    fontSize: 'clamp(24px, calc(24px +(40 - 24)*((100vw - 768px) /(1920 - 768))), 40px)',
  },
  fontWeightBold: 700,
  fontWeightMedium: 500,
  fontWeightRegular: 400,
}});

Everything works, but the fontSize field in the elements inspector is installed equal to font-size: NaNrem and as a result, font-size is taken by default 2em. At the same time, the inspector shows that CSS has a variable --mui-font-h1: bold clamp(24px, calc(24px +(40 - 24)*((100vw - 768px) /(1920 - 768))), 40px)/1.14 Circe,sans-serif. It is partially possible to circumvent this problem by conveying the fontSize value additionally in components.MuiTypography.styleOverrides.h1.fontSize, but this only works if the value of typogtaphy.р1.fontSize is defined as NaNrem. As far as I understand the error, when the installation of the fontSize parameter is combed in the variable ``Mui-font-h1`, are there any ways to solve this problem?

Upvotes: 1

Views: 33

Answers (0)

Related Questions