Move `Container` gutter (padding) to theme
Open
Nobody has claimed this yet.
component: Container
scope: system
type: new feature
- 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 would like to see Container get its left and right padding—or "gutter width"—from a new value in the base theme.
This would offer two benefits:
- You could set a custom responsive page gutter width in your theme, and still use the
disableGuttersproperty onContainer. This current incompatibility betweentheme.components.MuiContainer.styleOverridesandContainer.disableGuttersis a known issue (#30825). - Other components could use the page gutter width too. For example, we have a carousel component that uses the page gutter to show previous/next navigation buttons; other components could also start to use the page gutter in creative ways.
Examples 🌈
No response
Motivation 🔦
No response
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 tracing how Container currently determines its left and right padding, how disableGutters interacts with theme.components.MuiContainer.styleOverrides, and where base theme values are defined. Done means Container can read a responsive gutter width from the base theme, disableGutters remains usable, and other components can consume the same page gutter value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100