密度

如何将密度应用于 Material UI 组件。

应用密度

本节介绍如何应用密度。它不涵盖潜在的用例，或在您的应用程序中使用密度时的注意事项。《Material Design 指南》有一个综合指南，更详细地介绍了这些主题。

实施密度

可以通过 props 将更高密度应用于某些组件。组件页面至少有一个示例，展示了如何将更高密度应用于相应的组件。

根据组件的不同，密度可以通过减小间距或直接减小尺寸来应用。

以下组件具有应用更高密度的 props

探索主题密度

此工具允许您通过间距和组件 props 应用密度。您可以浏览一下，看看这如何应用于 Material UI 组件的整体感觉。

如果您启用高密度，自定义主题将应用于文档。此主题仅用于演示目的。您不应该将此主题应用于您的整个应用程序，因为这可能会对用户体验产生负面影响。《Material Design 指南》有关于何时不应用密度的示例。

该主题配置了以下选项

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',
      },
    },
  },
});