Puede usar el "Espaciado" en un componente BOX simplemente importando el componente primero:

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

El componente Box funciona como un "Envoltorio" para el componente al que desea "Modificar" el espaciado.

entonces puede usar las siguientes propiedades en el componente:

La utilidad espacial convierte los accesorios de margen y relleno abreviados en declaraciones CSS de margen y relleno. Los accesorios se nombran con el formato {propiedad}{lados}.

Donde la propiedad es una de:

m - para clases que establecen margen p - para clases que establecen relleno

Donde lados es uno de:

t - para clases que establecen margin-top o padding-top

b - para clases que establecen margin-bottom o padding-bottom

l - para clases que establecen margin-left o padding-left

r - para clases que establecen margin-right o padding-right

x - para clases que configuran tanto *-left como *-right

y - para clases que establecen tanto *-top como *-bottom

en blanco: para clases que establecen un margen o relleno en los 4 lados del elemento

como ejemplo:

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

La solución de estilo de Material-UI utiliza JSS en su núcleo. Es un compilador de JS a CSS de alto rendimiento que funciona en tiempo de ejecución y en el lado del servidor.

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

Puede inyectar estilos con withStyle HOC en su componente. Así es como funciona y está muy optimizado.

EDITADO: para aplicar estilos en todos los componentes, debe usar createMuiTheme y envolver su componente con 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>

En Material-UI v5, uno puede cambiar el estilo del botón usando los accesorios sx . Puede ver las propiedades del sistema de margen/relleno y su propiedad CSS equivalente aquí .

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

Las abreviaturas de propiedad como m o p son opcionales si desea crear rápidamente un prototipo de su componente, puede usar las propiedades CSS normales si desea que su código sea más legible.

El siguiente código es equivalente al anterior pero usa propiedades 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>

Demo en vivo