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-对于设置页边空白或填充边空白的类

b-对于设置边距底或边距底的类

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

r-对于设置右边距或填充右边的类

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

的类

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

的类

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

例如：

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

Answer 2

在 Material-UI v5 中，可以使用 sx 道具更改按钮样式。您可以看到边距/填充系统属性及其等效的 CSS 属性 here。

<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={{ margin: 2 }} variant="contained">
  margin
</Button>
<Button sx={{ padding: 2 }} variant="contained">
  padding
</Button>
<Button sx={{ paddingTop: 2 }} variant="contained">
  padding top
</Button>
<Button sx={{ paddingLeft: 3, paddingRight: 3 }} variant="contained">
  padding left, right
</Button>
<Button sx={{ marginTop: 2, marginBottom: 2 }} variant="contained">
  margin top, bottom
</Button>

现场演示

Answer 3

Material-UI的样式解决方案以JSS为核心。这是一种高性能JS到CSS的编译器，可在运行时和服务器端使用。

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);

您可以使用withStyle HOC将样式注入到组件中。这是它的工作方式，并且已经过非常优化。

已编辑：要在所有组件上应用样式，您需要使用createMuiTheme并用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>

Answer 5

首先在themeprovider中设置初始间距，即包含您应用条目的标签。看起来应该像这样

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});
function App() {
  return (
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
  );
 }

就是这样。因此，将主题部分添加到代码中，并根据需要使用边距/填充

const theme = {
  spacing: 8,
}

<Box m={-2} /> // margin: -16px;
<Box m={0} /> // margin: 0px;
<Box m={0.5} /> // margin: 4px;
<Box m={2} /> // margin: 16px;

您可以简称为“ margin”或“ m”，这同样适用于填充或

const theme = {
  spacing: value => value ** 2,
}

<Box m={0} /> // margin: 0px;
<Box m={2} /> // margin: 4px;

或

<Box m="2rem" /> // margin: 2rem;
<Box mx="auto" /> // margin-left: auto; margin-right: auto

Answer 6

在 4.0 版本之前，我们可以在 Typography 组件上使用 makeStyles 或样式道具来提供边距。

我强烈建议使用 Material ui 的 5.0 版本，在这个版本上，Typography 有边距道具，它让生活变得轻松。

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

6 个答案:

现场演示