Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.
Responsive layouts in Material Design adapt to any possible screen size. We provide the following helpers to make the UI responsive:
- Grid: The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs.
- Breakpoints: We provide a low-level API that enables the use of breakpoints in a wide variety of contexts.
- useMediaQuery: This is a CSS media query hook for React.
- Hidden: The hidden component can be used to change the visibility of the elements.
Several Material-UI components utilize
z-index, the CSS property that helps control layout by providing a third axis to arrange content.
We utilize a default z-index scale in Material-UI that's been designed to properly layer drawers,
modals, snackbars, tooltips, and more.
These values start at an arbitrary number, high and specific enough to ideally avoid conflicts.
- mobile stepper: 1000
- app bar: 1100
- drawer: 1200
- modal: 1300
- snackbar: 1400
- tooltip: 1500
These values can always be customized.
You will find them in the theme under the
We don’t encourage customization of individual values; should you change one, you likely need to change them all.