如何在材质ui元素中应用CSS属性？

Question

我刚刚开始使用material ui，但我不了解间距属性的工作原理。我正在检查如何对某些元素使用“间距”功能，但老实说，它似乎仅适用于“ Box”组件，而不适用于“ Buttons”之类的东西。

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

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

如您所见，我正在使用mt（margin-top属性），并根据文档中的内容进行设置：margin-top: 8px但未设置任何内容...

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

Answer 1

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

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

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