- To do this we start by importing the classNames function from the classNames module.
- This is what we always use when we want to combine classnames for a component.
- Now we add two props onto this IconButton component, iconClass and buttonClass.
- We want this component to take these two props for overrides because you might want to override how the icon
- itself looks, and you might want to override how the button around it looks, and because we're depending on
- new props now, guess what we need to go and do. Yes, you've guessed it.
- Property validation. So I specify a rule for iconClass, which is type string, and buttonClass, which is also
- a type string. None of these are required, and now we use the classNames function over here to go and say
- that we want to combine our own internal iconButton class with the buttonClass that might have been passed
- through on the props, and on the FontAwesome instance we specify that the className should be a combination
- of classNames and iconClass. You know what, we just want to actually say that we want to use for the
- className on the FontAwesome instance, this iconClass prop that's being passed through.
- Now we can go and use these props inside of the LinkList component, so we go and set buttonClass to
- styles.button, and iconClass to styles.icon. Now we can go and define that inside of the CSS.
- I'm sure you didn't want me to go and type it up bit by bit.
- We've got some shadow run on the button. We've got border-radius to make it a round button.
- We've got some display rules to go and say display it as an inline-block.
- Position fixed, and then we specify some fixed positioning, so 30 pixels from the right, 110 from the top.
- We give it a pink background color, give it some nice padding, and then we override the padding for the left and right.
- Then we specify a hover state for this, and we give it a different background-color.
- For our icon we just specify that we want a white color for it.
- Let's go and have a look in the browser. Great. So our button is displaying here on the LinkList,
- and it's sort of like a floating action button that you get with material designs.
- When we hover over it you can see that it's got this nice effect where it changes background color.
- Cool. So our icon button is working. Let's also go and use it inside of the AppBar now where we've got this hamburger menu.
- Let's remove this FontAwesome reference in here, and replace this with an import for the IconButton instead,
- and now let's go and replace the FontAwesome code down here with IconButton code, so we change this to an
- IconButton, we specify an icon of bars, buttonClass, we use styles.iconButton, iconClass, styles.icon,
- and onClick we use toggleDrawer. We also want to remove this wrapping div around it.
- We don't need it anymore, just the icon button contains all this stuff for us.
- Okay, let's go and see if this worked in the browser. I reload, and the icon button is still
- displaying there, so that's a good start, and when I click on it it brings up the app bar, so it's definitely
- hooked in correctly.