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!