我们如何在材质 ui 元素中应用 css 属性？答案

【问题标题】：How do we apply css properties in material ui elements?我们如何在材质 ui 元素中应用 css 属性？
【发布时间】：2020-07-02 04:44:21
【问题描述】：

我刚开始使用material ui，我不明白间距属性是如何工作的。我正在检查如何对某些元素使用“间距”功能，但老实说，它似乎只适用于“盒子”组件，而不适用于“按钮”之类的东西。

根据material ui spacing section，如果我们想添加边距或内边距，我们可以使用m 或p，但如果您尝试将这些属性用作Button 组件的一部分，则它不起作用：

<Button variant="contained" color="primary" mt={2}>
  Primary
</Button>

如您所见，我正在使用 mt（margin-top 属性），根据文档所说，这应该适用：margin-top: 8px 但它没有设置任何内容...

所以，我的问题是，我们可以在材质 ui 中使用间距属性的元素是什么？在我的示例中我做错了什么？

【问题讨论】：

您是否将 themeprovider 作为 HOC 用于您的应用程序？ Button 也不需要任何 'mt' 属性 ==> material-ui.com/api/button
只有当您使用 ThemeProvider 包装您的组件并配置您的主题以添加这些间距和颜色属性时，才能应用这些主题属性。否则，要将自定义样式添加到材质 ui 组件，您可以使用 makeStyles 或 withStyles 覆盖它们。
不，我没有使用主题提供程序，但我真的需要它吗？对于“Box”等其他组件，您只需设置“m”或“p”属性即可。

【解决方案1】：

您必须将 Button 包装在 Box 组件中才能应用这样的间距属性

<Box mt={2} color="primary" clone>
<Button variant="contained">
  Primary
</Button>
</Box>

因为 Button 组件默认不接收这些间距属性。

【讨论】：