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 to create a ReactNative project

++code>yarn create-react-app my-material-ui-theme++/code>

++code>cd my-material-ui-theme++/code>

++code>yarn start++/code>

++code>yarn add material-ui++/code>

Then upate the App.js file with the following: 

App.js

++pre>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>
   );
 }
}++code>
++/code>++/pre>

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

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

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

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

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

++pre>import++code> MuiThemeProvider ++/code>from++code> ++/code>'material-ui/styles/MuiThemeProvider'++code>;
++/code>import++code> theme ++/code>from++code> ++/code>'xx/xx/theme'++code>;
++/code>++/pre>

• Encapsulate the app in it and pass your theme file in props

++pre>++code>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>
   );
 }
}
++/code>++/pre>

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

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.

++pre>++code>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'
       }
     }
   }
 }
});
++/code>++/pre>

Good, this is exactly what we expected!

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.

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

OK! Let's see our final result:

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!

[UPDATE (FOR FRENCH VIEWERS)]

Feel free to take a look at my live demonstration of this article and leave your comments! ?