Material UI theme global Dense setting

问题

Is there a way to set global Dense setting preferably somewhere inside theme config? I'm building applications exclusively for desktop users and would like more information to be on the screen.

Gmail already has this option

And many individual components have property to make them more compact.

回答1:

You can set default values for any Material-UI component props. See the documentation here: https://material-ui.com/customization/globals/#default-props.

For instance to default all Material-UI List components to be dense, you would have the following in your theme:

const theme = createMuiTheme({
  props: {
    MuiList: {
      dense: true
    }
  }
});

For aspects that can't be controlled using props, you can use the overrides key of the theme to override CSS for each component.

来源：https://stackoverflow.com/questions/56400861/material-ui-theme-global-dense-setting