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

Question

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

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

我知道使用纯 CSS 和类可以做到这一点，但我想使用 Material-UI 方式。

Answer 1

您可以在 BOX 组件中使用 de "Spacing"，只需先导入组件即可:

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

Box 组件作为您想要“修改”间距的组件的“包装器”。

然后你可以在组件上使用下一个属性:

space 实用程序将速记边距和填充 Prop 转换为边距和填充 CSS 声明。 Prop 使用 {property}{sides} 格式命名。

其中属性是以下之一:

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

其中边是以下之一:

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>