如何为所有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 实用程序将速记边距和填充道具转换为边距和填充 CSS 声明。道具使用格式 {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>

Answer 2

在 Material-UI v5 中，可以使用sxprops 更改按钮样式。您可以在此处查看边距/填充系统属性及其等效的 CSS 属性。

<Button sx={{ m: 2 }} variant="contained">
  margin
</Button>
<Button sx={{ p: 2 }} variant="contained">
  padding
</Button>
<Button sx={{ pt: 2 }} variant="contained">
  padding top
</Button>
<Button sx={{ px: 2 }} variant="contained">
  padding left, right
</Button>
<Button sx={{ my: 2 }} variant="contained">
  margin top, bottom
</Button>

如果您想快速构建组件原型，则属性简写如m或p是可选的，如果您希望代码更具可读性，则可以使用普通的 CSS 属性。

下面的代码与上面的代码等效，但使用 CSS 属性：

<Button sx={{ m: 2 }} variant="contained">
  margin
</Button>
<Button sx={{ p: 2 }} variant="contained">
  padding
</Button>
<Button sx={{ pt: 2 }} variant="contained">
  padding top
</Button>
<Button sx={{ px: 2 }} variant="contained">
  padding left, right
</Button>
<Button sx={{ my: 2 }} variant="contained">
  margin top, bottom
</Button>

现场演示

Answer 3

Material-UI's styling solution uses JSS at its core. It's a high performance JS to CSS compiler which works at runtime and server-side.

import { withStyles} from '@material-ui/core/styles';

const styles = theme => ({
  buttonPadding: {    
    padding: '30px',   
  },
});

function MyButtonComponent(props) {
  const { classes } = props;

  return (      
      <Button
        variant="contained"
        color="primary"
        className={classes.buttonPadding}
      >
        My Button
      </Button>
  );
}

export default withStyles(styles)(MyButtonComponent);

You can inject styles with withStyle HOC into your component. This is how it works and it's very much optimized.

EDITED: To apply styles across all components you need to use createMuiTheme and wrap your component with MuiThemeprovider

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        margin: "10px",
        padding: "10px"
      }
    }
  }
});

 <MuiThemeProvider theme={theme}>
  <Button variant="contained" color="primary">
    Custom CSS
  </Button>

  <Button variant="contained" color="primary">
    MuiThemeProvider
  </Button>

  <Button variant="contained" color="primary">
    Bootstrap
  </Button>
</MuiThemeProvider>

Answer 4

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

<Box m={1} p={2}>
  <Button color="default">
    Your Text
  </Button>
</Box>