材质UI主题全局密集设置

问题描述

有没有一种方法可以在主题配置中的某个位置设置全局Dense设置?我正在专门为桌面用户构建应用程序，并希望在屏幕上显示更多信息.

Gmail已经具有此选项

许多单独的组件都有使它们更紧凑的属性.

解决方案

您可以为任何Material-UI组件道具设置默认值.请参阅此处的文档:

对于无法使用 props 控制的方面，您可以使用 覆盖主题的键，以覆盖每个组件的CSS.

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.

解决方案

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.

这篇关于材质UI主题全局密集设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！