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

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

Box组件作为要“修改”间距的组件的“ Package 器”。
然后你可以在组件上使用下一个属性：
space实用程序将速记margin和padding props转换为margin和padding 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的类
blank -用于在元素的所有4侧设置边距或填充的类
例如：

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

Material-UI的样式化解决方案在4.x版本的核心使用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 Package 您的组件

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>

在Material-UI v5中，可以使用sx属性更改按钮样式。你可以在这里看到margin/padding系统属性和它的等价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={{ 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>

现场演示

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

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

我们可以使用material-ui的makeStyles来实现这一点**，而不需要使用Box组件**。
创建一个 customSpacing 函数，如下所示。

customSpacing.js

import { makeStyles } from "@material-ui/core";

const spacingMap = {
  t: "Top", //marginTop
  b: "Bottom",//marginBottom
  l: "Left",//marginLeft
  r: "Right",//marginRight
  a: "", //margin (all around)
};

const Margin = (d, x) => {
  const useStyles = makeStyles(() => ({
    margin: () => {
      // margin in x-axis(left/right both)
      if (d === "x") {
        return {
          marginLeft: `${x}px`,
          marginRight: `${x}px`
        };
      }
      // margin in y-axis(top/bottom both)
      if (d === "y") {
        return {
          marginTop: `${x}px`,
          marginBottom: `${x}px`
        };
      }
      return { [`margin${spacingMap[d]}`]: `${x}px` };
    }
  }));
  const classes = useStyles();
  const { margin } = classes;
  return margin;
};

const Padding = (d, x) => {
  const useStyles = makeStyles(() => ({
    padding: () => {
      if (d === "x") {
        return {
          paddingLeft: `${x}px`,
          paddingRight: `${x}px`
        };
      }
      if (d === "y") {
        return {
          paddingTop: `${x}px`,
          paddingBottom: `${x}px`
        };
      }
      return { [`padding${spacingMap[d]}`]: `${x}px` };
    }
  }));
  const classes = useStyles();
  const { padding } = classes;
  return padding;
};

const customSpacing = () => {
  return {
    m: Margin,
    p: Padding
  };
};

export default customSpacing;

现在将上面的customSpacing函数导入到你的Component中，使用方法如下。App.js

import React from "react";
import "./styles.css";
import customSpacing from "./customSpacing";

const App = () => {
  const { m, p } = customSpacing();
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2
        style={{ background: "red" }}
        className={`${m("x", 20)} ${p("x", 2)}`}
      >
        Start editing to see some magic happen!
      </h2>
    </div>
  );
};

export default App;

click to open codesandbox

我们可以在Typography组件上使用makeStyles或styles props来给予边距，直到4.0版本。
我强烈推荐使用5.0版本的材质用户界面，在这个版本上，排版是有保证金的，它使生活变得容易。

针对全局样式的padding-top（10 px）

Read this!

import React from "react";
import { Container, makeStyles, Typography } from "@material-ui/core";
import { Home } from "@material-ui/icons";

const useStyles = makeStyles((theme) => ({

container: {
    paddingTop: theme.spacing(10),
},
}));

const LeftBar = () => {
const classes = useStyles();

return (
    <Container className={classes.container}>
        <div className={classes.item}>
            <Home className={classes.icon} />
            <Typography className={classes.text}>Homepage</Typography>
        </div>
    </Container>
);
};

export default LeftBar;

<Button color="default" p=10px m='5px'>

设置初始间距首先在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>
  );
 }

这就是它.所以添加主题部分的代码和使用margin/padding作为你的愿望

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”来表示，这同样适用于padding或

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