Material UI 1.0 with Styled Components

Material UI 1.0 brings with it huge styling flexibility compared to its predecessor. For starters, now you can easily theme and style the components by passing props like this:

This simple requirement used to be a big pain in the previous version of Material UI. Not only that, but it is also much easier nowadays to combine Material UI with Styled Components.

Let's demonstrate how easy it is to style an AppBar.

In this example we are basically styling the default Material UI AppBar component by doing a styled Button and a styled Typography component. Additionally, I am giving a nice blue color to the AppBar by passing the color prop. The resulting AppBar will look like this:

No comments: