Responsive typography helper for modifying properties

[andyfangaf]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Sometimes it's necessary to have an h6 with a different fontWeight than what's in the theme, but referencing it directly with theme.typography.h6.fontSize makes you lose out on responsiveness.

Possible solutions 🌈

• Add fontWeight property to Typography
• Add utility to get the responsive fontWeight

Motivation 🔦

No utility for responsive font sizes, unless you're using Typography which doesn't accept custom font weights :(

[oliviertassinari]

Duplicate of #15561

[andyfangaf]

@oliviertassinari I don't think this is a duplicate of that issue, which advocates for alignment (already a solution for that). You can't do the same with font-weights, since they're fixed to the theme (can't inherit).

[oliviertassinari]

From what I understand, they are some cases where you want to change the font weight, using the fontWeight prop of the system would solve your issue (it also comes with responsive helpers)

[andyfangaf]

Ah I overlooked that, thank you.

Is there any reason it's not part of the Typography component API?

[andyfangaf]

@oliviertassinari okay I gave that a try, but Typography won't inherit from Box if you've set a default in your theme. Typography has more specificity.

<Box fontWeight={500}>
  <Typography variant="h5" color="textSecondary">
     Foo
  </Typography>
</Box>

[oliviertassinari]

Correct, it's what we want to solve in #15561.