如何在material-ui中使用断点作为主题间距

import React from 'react';
import { createTheme, ThemeProvider, makeStyles } from '@mui/material/styles';
import Button from '@mui/material/Button';

// 创建自定义主题
const theme = createTheme({
  spacing: 8,
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
});

// 使用makeStyles创建样式
const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
    [theme.breakpoints.up('sm')]: {
      margin: theme.spacing(2),
    },
    [theme.breakpoints.up('md')]: {
      margin: theme.spacing(3),
    },
    [theme.breakpoints.up('lg')]: {
      margin: theme.spacing(4),
    },
  },
}));

function App() {
  const classes = useStyles();

  return (
    <ThemeProvider theme={theme}>
      <Button className={classes.button}>Click me</Button>
    </ThemeProvider>
  );
}

export default App;