1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Up and Running with Material UI's Theme Provider Component

    Thomas GrecoThomas Greco
    reactReact

    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

    Material UI Docs - Button API

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Thomas Greco: 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.

    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.

    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.

    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.

    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."

    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.

    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.

    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.