005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
120 lines
3.0 KiB
Markdown
120 lines
3.0 KiB
Markdown
# Density
|
||
|
||
<p class="description">How to apply density to Material UI components.</p>
|
||
|
||
## Applying density
|
||
|
||
This section explains how to apply density.
|
||
It doesn't cover potential use cases, or considerations for using density in your application.
|
||
The Material Design guidelines have a [comprehensive guide](https://m2.material.io/design/layout/applying-density.html) covering these topics in more detail.
|
||
|
||
## Implementing density
|
||
|
||
Higher density can be applied to some components via props. The component pages
|
||
have at least one example using the respective component with higher density applied.
|
||
|
||
Depending on the component, density is applied either via lower spacing, or simply by
|
||
reducing the size.
|
||
|
||
The following components have props applying higher density:
|
||
|
||
- [Button](/material-ui/api/button/)
|
||
- [Fab](/material-ui/api/fab/)
|
||
- [FilledInput](/material-ui/api/filled-input/)
|
||
- [FormControl](/material-ui/api/form-control/)
|
||
- [FormHelperText](/material-ui/api/form-helper-text/)
|
||
- [IconButton](/material-ui/api/icon-button/)
|
||
- [InputBase](/material-ui/api/input-base/)
|
||
- [InputLabel](/material-ui/api/input-label/)
|
||
- [ListItem](/material-ui/api/list-item/)
|
||
- [OutlinedInput](/material-ui/api/outlined-input/)
|
||
- [Table](/material-ui/api/table/)
|
||
- [TextField](/material-ui/api/text-field/)
|
||
- [Toolbar](/material-ui/api/toolbar/)
|
||
|
||
## Explore theme density
|
||
|
||
This tool allows you to apply density via spacing and component props. You can browse
|
||
around and see how this applies to the overall feel of Material UI components.
|
||
|
||
If you enable high density a custom theme is applied to the docs. This theme is only
|
||
for demonstration purposes. You _should not_ apply this theme to your whole application
|
||
as this might negatively impact user experience. The [Material Design guidelines](https://m2.material.io/design/layout/applying-density.html) has examples
|
||
for when not to apply density.
|
||
|
||
The theme is configured with the following options:
|
||
|
||
```js
|
||
const theme = createTheme({
|
||
components: {
|
||
MuiButton: {
|
||
defaultProps: {
|
||
size: 'small',
|
||
},
|
||
},
|
||
MuiFilledInput: {
|
||
defaultProps: {
|
||
margin: 'dense',
|
||
},
|
||
},
|
||
MuiFormControl: {
|
||
defaultProps: {
|
||
margin: 'dense',
|
||
},
|
||
},
|
||
MuiFormHelperText: {
|
||
defaultProps: {
|
||
margin: 'dense',
|
||
},
|
||
},
|
||
MuiIconButton: {
|
||
defaultProps: {
|
||
size: 'small',
|
||
},
|
||
},
|
||
MuiInputBase: {
|
||
defaultProps: {
|
||
margin: 'dense',
|
||
},
|
||
},
|
||
MuiInputLabel: {
|
||
defaultProps: {
|
||
margin: 'dense',
|
||
},
|
||
},
|
||
MuiListItem: {
|
||
defaultProps: {
|
||
dense: true,
|
||
},
|
||
},
|
||
MuiOutlinedInput: {
|
||
defaultProps: {
|
||
margin: 'dense',
|
||
},
|
||
},
|
||
MuiFab: {
|
||
defaultProps: {
|
||
size: 'small',
|
||
},
|
||
},
|
||
MuiTable: {
|
||
defaultProps: {
|
||
size: 'small',
|
||
},
|
||
},
|
||
MuiTextField: {
|
||
defaultProps: {
|
||
margin: 'dense',
|
||
},
|
||
},
|
||
MuiToolbar: {
|
||
defaultProps: {
|
||
variant: 'dense',
|
||
},
|
||
},
|
||
},
|
||
});
|
||
```
|
||
|
||
{{"demo": "DensityTool.js", "hideToolbar": true}}
|