How to style Material UI components

Learn how to create custom buttons in React using the Material UI framework

Material UI is one of the most famous React UI frameworks.
It allows you to integrate Material Design components into your React web application easily.

One of the first things you learn, by using Material UI, is to define a global theme that works in your entire application.
This has huge benefits since it makes it easier to adjust your styling just by changing few properties in the theme definition.

However, if you need to define different styles for certain components, like Buttons, you need to define a custom component and use a component-level theme.

In this article, I’ll explain how to define a global theme, that works in your entire application, and define some custom reusable components with a specific theme.

Setup

First, you need to install the Material UI framework into your React application.
To do this you just need to navigate to your React project main folder with a terminal and type the command:

npm install @material-ui/core

This will install the core components of the framework along with the tools to manage the theme.

Define a global theme

Next, you’ll need to define a global theme for your application.
One good practice is to define a theme.js file into your /src folder.
This will keep your main App.js code lighter and make your application structure cleaner.

import { createTheme } from "@material-ui/core"; 
import { blueGrey, lightBlue } from "@material-ui/core/colors"; 
export const theme = createTheme({  
    palette: {    
        primary: {      
            main: lightBlue[500],      
            light: lightBlue[300],      
            dark: lightBlue[700],    
        },    
        secondary: {      
            main: blueGrey[700],      
            light: blueGrey[500],    
        },
    }
})

What this code does is create a new Material UI theme by using the createTheme function.
This function accepts an object as an argument.
By defining its attributes you override the default Material UI theme.

In the file above I specified the palette attribute, by doing this my whole application will be styled using lightBlue as the main color, and blueGrey as the secondary color.

The last step, to start using this theme you need to import it into your App.js file and specify it into a ThemeProvider component.
What this component does is take the specified theme property and make it available to all the components inside of it.

import { ThemeProvider } from "@material-ui/core";
import { theme } from "./theme"
const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <!-- Your application content -->
        </ThemeProvider>
    )
}

With this environment setup, you can start creating different Buttons that will use the colors specified in the theme palette.

import { 
    ThemeProvider,
    Button
} from "@material-ui/core";
import { theme } from "./theme"
const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <Button 
                color="primary"
                variant="contained"
            >Primary</Button>
            <Button 
                color="secondary" 
                variant="contained"
            >Secondary</Button>        
        </ThemeProvider>
    )
}

As you can see you can easily specify the component appearance by using the color attribute.
However, the color attribute for the Button API only accepts 4 values: default inherit, primary and secondary.

What if you need to apply a different theming?

Unlike Bootstrap, which allows specifying the success, warning, danger, and other classes, in Material UI you’ll need to create your own custom components with its own local theming.

Let’s see how to do it.

Define custom buttons

First, you’ll need to create your own custom reusable components.
In my example, I will recreate the classical buttons for success, warning, and danger actions.

You’ll want to keep all these components in a separate folder to keep the project organized.
Let’s create a new folder structure: /src/components/views.

Create three distinct files in it, called SuccessButton.js, WarningButton.js, and DangerButton.js.

Since the procedure is equivalent for all three components, I’ll just explain the SuccessButton.

import { 
    createTheme, 
    ThemeProvider, 
    Button 
} from "@material-ui/core"
import { green } from "@material-ui/core/colors";
const theme = createTheme({
    palette: {
        primary: {
            main: green[500]
        }
    }
})
const SuccessButton = ({ title, variant, onClick }) => {
    return (
        <ThemeProvider theme={theme}>
            <Button 
                color="primary" 
                variant={variant}              
                onClick={onClick}
            >{ title }</Button>
        </ThemeProvider>
    )
}
export default SuccessButton

As you can see I’ve specified a component-level theme with a primary color of green, like the Bootstrap success color.

Using the ThemeProvider component inside the component, this palette will be applied only to the Button specified in the component.

Also, to apply custom properties and gesture listeners, I’ve specified three custom props for the component, which will override the local component properties.

You can then import the buttons and reuse them easily in your application:

import { 
    ThemeProvider,
    Button
} from "@material-ui/core";
import { theme } from "./theme"
import SuccessButton from "./components/views/SuccessButton"
import WarningButton from "./components/views/WarningButton"
import DangerButton from "./components/views/DangerButton"
const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <SuccessButton 
                title="Success" 
                variant="contained"
                onClick={ () => console.log("Success clicked!") } />
            <WarningButton 
                title="Warning"
                variant="outlined" 
                onClick={ () => console.log("Warning clicked!") } />
            <DangerButton 
                title="Danger" 
                variant="text"
                onClick={ () => console.log("Danger clicked!") } />       
        </ThemeProvider>
    )
}

You can check the complete code for the example project in this GitHub repo.

At first, it may look like a lot of code compared to the one used for classical Bootstrap components.

Anyway, once you get familiar with how React components and Material UI theming works you’ll notice how easy it is to create custom and reusable components to use in your entire applications.

I hope that this guide will help you to create beautiful web applications using the amazing tools that are React and Material UI.

Happy Coding!