Comments (2)
Thanks for the feedback @thuphan27379 ! I completely agree that the docs are lacking when it comes to describing the use cases for these components. In fact, I'm currently in the process of revising the Box page (#40622) and the Container page (#41074), and I'll plan on revising Grid and Stack next!
To quickly answer your questions as best as I can:
- Use Container for the top level wrapper of the app—in other words, it should sit close to the app's
<body>
tag, and like<body>
, there should be only one - Use Grid inside your Container to arrange Boxes and Stacks into a layout
- Use Stack as a wrapper to arrange content along the horizontal or vertical axis
- Use Box for all other generic wrapping purposes—like a
<div>
that has access to your theme and other MUI-specific features- Because Box is a generic wrapper, you could also put a Grid or a Stack inside of one—but it would be strange to put a Container inside of a Box, because the Container is meant to be at the top of the DOM tree
- You can put a
<div>
inside of any of these components, as needed—the main benefit of using layout components instead of plain HTML is that you get access to additional customization tools (props, theme tokens)
I hope that helps! Please feel free to ask more questions if you have any—it will help us to better revise these docs for everyone else.
from material-ui.
thanks alot!
from material-ui.
Related Issues (20)
- [useAutocomplete] Add support for `groupedOptions` to always be returned regardless of focus
- [joy-ui][Input][FormControl][Select] Example component use from docs cause console error
- [material-ui][Autocomplete] Null or undefined default value makes the option list trim white spaces HOT 3
- [material-ui][AppBar] Background color is lighter than what the theme defines HOT 1
- [material-ui][Transition] Add flip transition HOT 1
- [material-ui] Next 13: Prop types error on children when using async component HOT 2
- [material-ui][Dialog] Wrong focus behavior using iOS VoiceOver and FocusTrap
- [material-ui][Slider] Webapp exiting fullscreen when dragging the slider in iPads
- Snackbar background color is not as expected with CssVarProvider
- [pigment-css][vite] HMR doesn't work when removing a css property HOT 1
- [material-ui][Autocomplete] Async server filtering not working
- [material-ui][next] AppCacheProvider with Next v13 and v14 Pages Router causes flickering
- Small issue in collapsible table docs HOT 2
- [material-ui][Autocomplete] broke backward compatibility with loading state HOT 4
- [icons] MUI missing "Emergency" icon HOT 4
- [material-ui] Focus-visible state does not meet WCAG AA across the system HOT 2
- Any plan for mention function with MUI Textarea HOT 1
- [docs-infra] Scoped notification per product HOT 3
- [material-ui][Autocomplete] Allow the user to remove the textarea warning
- [docs-infra] Investigate the report of web vitals
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.