如何为所有 Material-UI 组件添加填充和边距？

Question

我需要为一些 Material-UI 组件添加填充或边距，但找不到简单的方法来做到这一点。我可以将这些属性添加 到所有组件 吗？像这样的东西：

 <Button color="default" padding={10} margin={5}>

我知道这可以使用纯 CSS 和类来实现，但我想以 Material-UI 的方式来实现。

原文由 rostamiani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您只需先导入组件，即可在 BOX 组件中使用 de“Spacing”：

 import Box from '@material-ui/core/Box';

Box 组件充当您要“修改”间距的组件的“包装器”。

然后您可以在组件上使用下一个属性：

space 实用程序将速记 margin 和 padding 属性转换为 margin 和 padding CSS 声明。道具使用 {property}{sides} 格式命名。

其中财产是以下之一：

m - 对于设置边距的类 p - 对于设置填充的类

其中 sides 是以下之一：

t - 对于设置 margin-top 或 padding-top 的类

b - 对于设置 margin-bottom 或 padding-bottom 的类

l - 对于设置 margin-left 或 padding-left 的类

r - 对于设置 margin-right 或 padding-right 的类

x - 对于同时设置 *-left 和 *-right 的类

y - 对于同时设置 *-top 和 *-bottom 的类

空白 - 用于在元素的所有 4 个边上设置边距或填充的类

举个例子：

 <Box m={2} pt={3}>
  <Button color="default">
    Your Text
  </Button>
</Box>

原文由 Miguel Angel Marroquin Jordan 发布，翻译遵循 CC BY-SA 4.0 许可协议