How to do it...

Let's say that you have the following style customizations that you want to apply to the Button components used throughout your application:

  • Every button needs a margin by default.
  • Every button that uses the contained variant should have additional top and bottom padding.
  • Every button that uses the contained variant and the primary color should have additional top and bottom padding, as well as additional left and right padding.

Here's an example that shows how to use the Button CSS API to target these three different Button types with styles:

import React, { Fragment } from 'react';import { withStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';const styles = theme => ({  root: { margin: ...

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.