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.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!