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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.