[`@mui/material/styles`] `responsiveFontSizes` utility to extract values
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
I'm using responsiveFontSizes(theme).
I have a component composed of a Typography and an Icon.
The problem is that when I use big variants, for instance h3, I get a really small icon in comparison:
I would like to be able to dynamically apply the same font-size to the icon as the responsive one given to the Typography component.
Examples 🌈
I was imagining an util function like this:
getResponsiveFontSize(variant)
<Icon fontSize={getResponsiveFontSize("h3")} />
getResponsiveFontSize(theme, variant) is maybe more realistic.
Motivation 🔦
The goal is to keep consistency between theme and css.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the responsiveFontSizes utility and the Typography and Icon APIs to understand how responsive variant sizes are calculated and exposed. Define how a getResponsiveFontSize-style API should accept the theme and variant, then verify that an icon can receive the same responsive font-size as the selected Typography variant.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100