材质 UI 尺寸

Question

我刚刚开始使用 React 的 Material UI 组件。虽然我仍然习惯于不对自己的组件进行样式设置，而是导入开箱即用的方法，但我发现很难将它们融入我的项目中。

我经常发现组件对于我的布局来说太大了，这是由于太多的填充/边距造成的。

具体来说，我正在实施Selects。我搜索了文档和 SO，以寻找使大小（高度）适应我的项目的方法，但是由于组件具有六个子组件，因此尺寸永远不会相加。

调整组件尺寸并对齐所有依赖项的高度/宽度的有效方法是什么？

到目前为止，我已尝试将组件包装在 MUITheme 中，并添加了 CSSBaseline，两者均取自文档，但无济于事。我还尝试使用classes，但没有任何效果。

我直接进入 CSS，但只能设置顶级包装器的填充：#outlined-age-native-simple。这是我可以达到的唯一选择器，它实际上改变了任何东西。

Answer 1

尝试通过

调整theme.spacing.unit

const theme = createMuiTheme({ spacing: { unit: 4 }}) // default is 8

How to use a theme

请注意，根据material design guidelines，许多组件都有硬编码的填充/边距。