Density 密度

如何为 Material-UI 组件设置自定义的密度。

使用密度

本节解释了如何应用密度。这不包括一些潜在的用例，也不包括在应用程序中使用密度的注意事项。在 Material design 规范中有一个全面的指南，它详细地介绍了本章的内容。

实现密度（density）

通过给设置某些组件的属性，可以得到更大的密度。组件页面至少有一个例子，它使用各自的组件并具有较大的密度。

对于不同的组件，可以通过缩小组件的间距（spacing）或简单地减小组件的尺寸（size）来应用密度。

以下组件有一些能够达到较大密度的属性：

探索主题的密度

该工具允许您可以来通过 spacing 和 component 属性来应用密度。您可以浏览一下，看看在 Material-UI 组件上使用后的整体感觉如何。

如果您启用了较大的密度，那么一个自定义的主题将被应用到当前的文档中。该主题仅为演示使用。您 不应该 将此主题应用在整个应用程序中，因为这可能会对用户的体验产生一些负面影响。在 Material design 规范的示例中，列举了不应该使用密度的情景。

主题配置有以下选项：

const theme = createMuiTheme({
  components: {
    MuiButton: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiFilledInput: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiFormControl: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiFormHelperText: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiIconButton: {
      defaultProps: {
        size: 'small',
      },
      styleOverrides: {
        sizeSmall: {
          // 调整间距，以达到最小的触摸目标命中框。
          marginLeft: 4,
          marginRight: 4,
          padding: 12,
        },
      },
    },
    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',
      },
    },
  },
});