Implement a custom Material-UI theme on the server using a Higher-order component
In this lesson we’ll create a higher order component that will allow us to use Material-UI from within in a server-rendered environment. To do this, we will leverage Next.js’ getInitialProps lifecycle hook in order to avoid any issues with our styles rendering on both the client and server. This lesson will also show you how to get up and running with a custom Material UI theme!
Instructor: [00:00] Inside the share folder, I've an mui.js file which is going to hold our Material-UI higher order component. A higher order component, or HOC is a commonly referred to, is simply a component that takes another component, and injects with a specific piece of functionality.
[00:22] In this instance, we're going to use this getMuiTheme function to create a custom theme for us based on the color values that we have within this theme.js file. When implementing Material-UI from within a server rendered environment, we need to make sure that our application is loading the same code on the server as well as the client.
[00:46] To do this, we're going to use next getInitialProps lifecycle hook. To supply us with a userAgent from the environment that the application is being rendered within. Sender only receive the request object in the server. We can create a ternary expression to evaluate this.
[01:05] On the server, we'll receive the userAgent inside of our headers. While on the client, we'll get it from this navigators' object. The last thing we do is create a sub props constant. This is going to allow us to use next getInitialProps lifecycle hook from within the components that we're going to pass in your HOC.
[01:25] You'll notice that we're leveraging asyncawait functions, so we can await our composed component props like so. Now that our props are configure, we can return the userAgent as well as our sub props using this spread operator, and continue on a configure I think.
[01:46] In this course, we see the getMuiTheme function that we imported above. This is where we hold the configuration for a theme. On top of our configuration, we see that were setting the default font family to lato. Below this, we're supplying the color variables that we saw inside of theme.js, so that a theme can be made for us according to our liking.
[02:12] We can also do things like specify the height of the app bar component like so. As a result of this, every app bar that we render within our application is going to have a height of 50. Now the last thing we need to do, an arg will be the most important is pass in the userAgent const that were getting from our props.
[02:34] Now that our theme is configured, we can use the MuiThemeProvider component to wrap our compose component in our Material-UI theme. I taking a look at this com, we see that we're using the head component which is provided for us by next.
[02:50] This allows us to add tail tags to our page as well as the link tag, which is being used to import the lato font from the Google Fonts API. Directly below our closing head tag, we see the MuiThemeProvider component wrapping around our composed component. This is where we pass in the MUI theme constant that we just configured above.
[03:15] Now, the last thing we need to do is just pass in the props to our composed component, and now we're all ready to use this within our application.