CODEWITHSUNDEEP
reactjsuser-interfacematerial-ui
Nitin Shinde
Nitin Shinde

Reputation: 1244

How to apply custom color theme for Material UI

I am trying to apply my custom theme for my React Js application I am using Material UI.

Please explain me step by step.

I am very new in ReactJs and Material UI. It is my first project. Please Help me.

Upvotes: 2

Views: 3087

Answers (1)

Oleg Pro
Oleg Pro

Reputation: 2543

As it was already mentioned there're docs about this http://www.material-ui.com/#/customization/themes but I want to provide a few easy steps wich may be useful for beginners:

1 Theme creating

You can use storybook-addon-material-ui project to create your theme. The fastest way is to do it just on the demo page and download your theme as a JSON file.

2 Apply theme

I assume that you already have a structure like this:

<MuiThemeProvider>
  <MyMaterialComponents />
</MuiThemeProvider>

so your next step is:

import myTheme from './myTheme.json';

<MuiThemeProvider muiTheme={myTheme}>
  <MyMaterialComponents />
</MuiThemeProvider>

But please note that if you have non-material components in your <MyMaterialComponents /> theme settings won't affect them. If you still have questions after that you may find useful react-theming project

Update 2020

Here is updated documentation https://github.com/react-theming/storybook-addon#using-with-material-ui

Upvotes: 1

Related Questions