Want to add padding and margin to all Material-UI components? Material-UI’s styling solution uses JSS at its core. It’s a high performance JS to CSS compiler which works at runtime and server-side.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.