web-dev-qa-db-fra.com

Comment ajouter du rembourrage et de la marge à tous les composants Matériau?

Je dois ajouter du rembourrage ou des marges à certains composants de l'interface utilisateur, mais je ne trouve pas de moyen facile 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 cela est possible en utilisant du CSS pur et des classes, mais je veux le faire à la manière de Material-UI.

node.jsreactjscustomizationmaterial-ui
11
rostamiani

La solution de style de Material-UI utilise JSS en son cœur. C'est un compilateur JS to CSS hautes performances qui fonctionne à 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 withStyle HOC dans votre composant. Voilà comment cela fonctionne et c'est très optimisé.

EDITED: Pour appliquer des styles à tous les composants, vous devez utiliser createMuiTheme et envelopper 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>
5
Sakhi Mansoor