How do I style Material UI Components with my own CSS?

Without knowing how Material UI's CSS rules work, attempting to restyle the Button on your own may cause you to have an anxiety attack! Don't worry. Material UI makes it easy to add custom CSS to any element inside any component. They have many guides on this covering the styling APIs, themes and components.

We'll discuss the basic guide and the advanced customization guide. We recommend you read through both!

The basic styling guide explains at a high level, the several ways Material UI's styling API can work. Because we like to keep it real simple, we won't even talk about styled-components or HoC APIs, which you may not need.

Let's discuss the Hook API.

Material UI's Hook API

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});
export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

As you can see in this example, we're using the makeStyles function to generate a hook called useStyles which create a CSS classes object which contains the keys of the styles object we created. In this example, it doesn't actually matter that we call this class root, because we reference it like a variable when we add it to the Button's className prop. As you will read in the advanced customization guide:

Every component provides a className property which is always applied to the root element.

That's so important! That means we can always safely overwrite the root element's CSS. In this above example, we are changing the Button's background color, height, text color. Did you know that the Button is just a simple HTML <button> tag with a <span> for the text? There's a simplicity to underlying HTML that you should get to know.

This is pretty much it, taken from a contained Button example:

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary" tabindex="0" type="button">
    <span class="MuiButton-label">Primary</span>
    <span class="MuiTouchRipple-root"></span>
</button>

How to style inner HTML elements in Material UI

Okay so you might be wondering, how to I know how to target these inner HTML elements of Material UI? Where is this documented? Welcome to CSS rules! Let's quote from the "Overriding styles with classes" section. Read the following very closely!

When the className property isn't enough, and you need to access deeper elements, you can take advantage of the classes object property to customize all the CSS injected by Material-UI for a given component. The list of classes for each component is documented in the component API page, you should refer to the CSS section and rule name column. For instance, you can have a look at the Button CSS API. Alternatively, you can use the browser dev tools.

To summarize, you can find the names of the CSS rules in the second half of the component's API page. For the Button, you can see that there is a root rule, and a label rule. If you're too lazy to go to the API page and just want to inspect the HTML, you can see above that there is a -label rule right on the <span> element. Target that rule by using the classes prop with an object containing those keys from your classes you got from useStyles.

That looks like this:

<Button
  classes={{
    root: classes.root, // class name, e.g. `classes-nesting-root-x`
    label: classes.label, // class name, e.g. `classes-nesting-label-x`
  }}
>
  classes nesting
</Button>

Simple, yet powerful, isn't it?