在Material UI中调整组件的大小，而不取消格式化

import React from 'react';
import { Grid, Button } from '@material-ui/core';

function MyComponent() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <Button variant="contained" color="primary">
          Button 1
        </Button>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Button variant="contained" color="secondary">
          Button 2
        </Button>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Button variant="contained" color="primary">
          Button 3
        </Button>
      </Grid>
    </Grid>
  );
}

export default MyComponent;

import React from 'react';
import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customButton: {
    width: '200px',
    height: '50px',
  },
});

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

  return (
    <Button variant="contained" color="primary" className={classes.customButton}>
      Custom Size Button
    </Button>
  );
}

export default MyComponent;

.customButton {
  width: 200px !important;
  height: 50px !important;
}