Comment ajouter le padding et la marge à tous les composants Material-UI ?

Question

J'ai besoin d'ajouter un rembourrage ou une marge à certains composants de Material-UI, mais je n'ai pas trouvé de moyen simple de le faire. Puis-je ajouter ces propriétés à tous les composants ? quelque chose comme ça :

<Button color="default" padding={10} margin={5}>

Je sais que c'est possible en utilisant des classes et des CSS purs, mais je veux le faire à la manière de Material-UI.

Answer 1

Vous pouvez utiliser de "Spacing" dans un composant BOX en important d'abord le composant :

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

Le composant Box fonctionne comme une "enveloppe" pour le composant dont vous voulez "modifier" l'espacement.

alors vous pouvez utiliser les propriétés suivantes sur le composant :

L'utilitaire space convertit les props shorthand margin et padding en déclarations CSS margin et padding. Les props sont nommés en utilisant le format {property}{sides}.

Où la propriété est l'une des :

m - pour les classes qui fixent une marge p - pour les classes qui définissent le rembourrage

Où les côtés sont l'un des :

t - pour les classes qui définissent margin-top ou padding-top

b - pour les classes qui définissent margin-bottom ou padding-bottom

l - pour les classes qui définissent margin-left ou padding-left

r - pour les classes qui définissent la marge-droite ou le remplissage-droit

x - pour les classes qui définissent à la fois *-gauche et *-droite

y - pour les classes qui définissent à la fois *-top et *-bottom

blank - pour les classes qui définissent une marge ou un rembourrage sur les 4 côtés de l'élément.

à titre d'exemple :

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

Answer 2

La solution de stylisme de Material-UI utilise JSS à la base. Il s'agit d'un compilateur JS vers CSS très performant qui fonctionne au moment de l'exécution et côté serveur.

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

Vous pouvez injecter des styles avec le HOC withStyle dans votre composant. C'est ainsi que cela fonctionne et c'est très optimisé.

ÉDITION : Pour appliquer des styles à tous les composants, vous devez utiliser la fonction createMuiTheme et enveloppez votre composant avec 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 3

Dans Material-UI v5, on peut modifier le style des boutons à l'aide de la fonction sx props. Vous pouvez voir les propriétés du système margin/padding et sa propriété CSS équivalente ici .

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

Les raccourcis de propriétés comme m o p sont facultatifs si vous voulez prototyper rapidement votre composant, vous pouvez utiliser les propriétés CSS normales si vous voulez que votre code soit plus lisible.

Le code ci-dessous est équivalent au précédent mais utilise les propriétés 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>

Démonstration en direct

Answer 4

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

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

Answer 5

Nous pouvons utiliser makeStyles ou styles props sur le composant Typographie pour donner de la marge jusqu'à la version 4.0.

Je recommande vivement d'utiliser la version 5.0 de material ui et sur cette version la typographie a des accessoires de marge et cela rend la vie facile.