React Material-UI Cookbook

How to do it...

Let's say that you want to render three buttons and share some of the styles among them. One approach is to extend generic styles with more specific styles using the jss extend plugin. Here's how to do it:

import React, { Fragment } from 'react';import { JssProvider, jss } from 'react-jss';import {  withStyles,  createGenerateClassName} from '@material-ui/styles';import {  createMuiTheme,  MuiThemeProvider} from '@material-ui/core/styles';import Button from '@material-ui/core/Button';const styles = theme => ({  root: {    margin: theme.spacing(2)  },  contained: {    extend: 'root',    paddingTop: theme.spacing(2),    paddingBottom: theme.spacing(2)  },  containedPrimary: {    extend: 'contained',    paddingLeft: theme.spacing(4), paddingRight: theme.spacing(4) ...