[material-ui] Improve density for components
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Summary
Feature to globally set size for component variants. This would enable setting the size of each variant, which would then be applied to all components.
This is a related question on Stack Overflow. People have attempted this but have not yet found a proper solution.
Examples
Motivation
I would like to scale all the components and font sizes from a single place, preferably with MUI breakpoints. This can ensure a consistent appearance of the page regardless of the display size.
On some displays, the default component size is too large and occupies the entire screen. I cannot set the "small" variant for all components since I would like to keep the default variant on bigger screens.
Search keywords: global scale factor, shape MD3
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 reviewing MUI's theme customization and component size variants, then compare them with the breakpoint-based behavior described in the issue. Define how a global density setting would apply across components, typography, and responsive displays; the work is done when the behavior and supported scope are specified and consistently implemented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100