This lesson shows viewers how to setup theming using Material UI's `ThemeProvider` component. 

Once set up we will check out how we can use the `style` prop used in MUI's components system to apply our theme's color values to Login & Sign up buttons.

[Material-UI Docs - Themes](https://material-ui.com/customization/themes/)

[Material UI Docs - Button API](https://material-ui.com/api/button/)




https://app.egghead.io/api/v1/lessons/react-up-and-running-with-material-ui-s-theme-provider-component/subtitles

Up and Running with Material UI's Theme Provider Component

Thomas Greco: [00:00] inside this file, we have this theme configuration for our material UI theme. Inside index.js, I have the theme provided imported, but I'm also going to import this theme configuration from that create theme file we were just looking at. OK, once we get that, we can then set the theme drop on our theme provider component, and set it equal to our configuration.

[00:32] Now, the last thing I'm going to do is import the demo component that we'll be using this theme within. Then, I'm going to replace our "Howdy" string with that. Now that it's actually going, wire up this demo component.

[00:52] Inside here, I have React imported. Below React, I'm going to import the Box component as well as the Button component from the Material-UI core library. Following this, I'm just going to create this theme-demo component.

[01:16] I'm going to open up that box and place our Button component inside of it. I'm just going to have this button render, "Here I am." A little smiley face. Now we should be seeing a reflected...Looks like I forgot to export it. Now we see that button does, in fact, appear. Cool, but not what we're really going for.

[01:51] As we know, we have our theme configuration wired up for us. I can add a color prop on a Button and set it equal to primary. I'm also going to give Button the full width prop. The last thing I'm going to do is just change this to say "Login."

[02:14] If we reload the page, we see that our log in Button is displaying and now it uses that primary color from our color pallet. If I add the variant prop and specify this as a contained Button, we'll see this color come through in much more detail, as the contained Button has the most emphasis.

[02:39] To wrap this up, I'm going to add another Button, but this time we'll just say "Sign Up." We're going to change the color prop to use the secondary color.

[02:53] Now, if we look at our page, we'll see that our Login and Sign Up buttons are using their own respective colors, both of which are coming from our theme configuration.

Up and Running with Material UI's Theme Provider Component

Share this video with your friends