[fa icon="calendar"] Publié le 01 March 2018 par Arthur Levoyer


Introduction

This article will quickly introduce you to the use of themes with material-ui library.

This article uses the newest version of material-ui (v1.0.0-beta.33), but themes should work the same way for previous versions, but customization options are less advanced.

Why would I want to use Material-UI theme?

Let’s say you are starting the design of your home page and you want to add a AppBar at the top with two buttons.

It seems that you will need a couple of material-ui components:

  • An AppBar
  • 2 Buttons

Let’s get into it! Follow the steps below:

  1. Create your React-App
    • yarn create-react-app my-material-ui-theme
    • cd my-material-ui-theme
    • yarn start
  2. Install material-ui: in your console, enter yarn add material-ui
  3. Create a App.js file and insert the following code:

App.js
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import React, { PureComponent } from 'react';

export default class Header extends PureComponent<PropType> {
render() {
return (
<AppBar position="static">
<div>
<Button>
<div>Button 1</div>
</Button>
<Button>
<div>Button 2</div>
</Button>
</div>
</AppBar>
);
}
}

You’re now the happy owner of the following AppBar:

mui_theme_default

Good! Enjoy the material-ui ripple effect when you click on the buttons :)
Unfortunately, the colors might not fit your taste…

This is probably because without any other indication from your side, Material-UI is using default values that you could find here (https://material-ui-next.com/customization/theme-default/)

Fortunately, Material-UI allows us to customize the default theme to meet our needs.

Using Material-UI theme

1) A first step to customize Material-UI theme : the default Material-UI theme

First, create a file theme.js in your app folder. We would like to give some pinkful color to our app bar:

theme.js

import { createMuiTheme } from 'material-ui/styles';
import indigo from 'material-ui/colors/indigo';
import pink from 'material-ui/colors/pink';
import red from 'material-ui/colors/red';

export default createMuiTheme({
palette: {
primary: pink,
secondary: indigo
// Indigo is probably a good match with pink
}
});

Then, we have to provide the theme above to your app. In order to this, we will encapsulate our app in a MuiThemeProvider.

  • Import the Provider and your theme file
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import theme from 'xx/xx/theme';
  • Encapsulate the app in it and pass your theme file in props
export default class Header extends PureComponent<PropType> {
render() {
return (
<MuiThemeProvider theme={theme}>
<AppBar position="static">
<div>
<Button>
<div>Button 1</div>
</Button>
<Button>
<div>Button 2</div>
</Button>
</div>
</AppBar>
</MuiThemeProvider>
);
}
}

That’s better!! Your app is now customized in a pinky way

Capture d’écran 2018-02-22 à 12.48.26

Although, I feel like you’re someone with a good sense of taste and you would rather have text color in white, it would go along much better with pink! Also, it would be nice to have a purple background when you pass your mouse on the button.

2) One step further: Customize all instances of a component type

To customize a specific kind of material UI components within our app, we will add an overrides property to our theme.js file as described below. You will need to provide to your theme object, the name and class of the component you want to customize. This will be found in the material-ui API documentation.

mui_button

 

import { createMuiTheme } from 'material-ui/styles';
import indigo from 'material-ui/colors/indigo';
import pink from 'material-ui/colors/pink';
import red from 'material-ui/colors/red';

export default createMuiTheme({
palette: {
primary: pink,
secondary: indigo
},
overrides: {
MuiButton: {
root: {
color: 'white',
'&:hover': {
backgroundColor: 'purple'
}
}
}
}
});

Good, this is exactly what we expected!

mui_theme_hover

 

To understand how you are able to override material-UI components properties, refer to the associated API docs. For example, take a look at https://material-ui-next.com/api/button/ to understand every possibilities you have to customize Buttons!

All right, we are reaching our desired AppBar for our homepage. Except that we would like our left Button to have a background a little bit lighter than the AppBar.

3) Last but not least: overrides theme for a specific instance of a component

MaterialUI theme will not be of any help here anymore, and our best chance is to inline style our left Button.

export default class Header extends PureComponent<PropType> {
render() {
return (
<MuiThemeProvider theme={theme}>
<AppBar position="static">
<div>
<Button style=>
<div>Button 1</div>
</Button>
<Button>
<div>Button 2</div>
</Button>
</div>
</AppBar>
</MuiThemeProvider>
);
}
}

OK! Let’s see our final result:

 

mui_theme_inline

Be careful because by doing this, you are overriding the hover effect as well! Make sure this is the behavior you expect!

Well, I believe we have reach the perfect combination of sexy and cute. Good job!

Take a look at the great MaterialUI documentation and improve the customer experience of your web app by using all sort of MUI components.

Enjoy!


Liked this article? Interested in building an app with us?

Contact a React Native expert in Paris




Want to rate this article?
Submit Rating

Topics: React, JavaScript, material-ui, design, material, User Interface