00:00 Hi there! I'm Deeksha Sharma from bonsaiilabs and today in this video we will cover how to add responsive typography to your react application using Material-UI library. So in the first place.. why do we need responsive font sizes? These days we are often writing applications that are responsive across all devices and responsiveness doesn't just stop at the image sizes or alignments, but we also need a way to use consistent font size of every character in our code. It also helps us so that we don't end up randomly changing these phone sizes for various screens. Now let's say we have a react component with the heading Our Work followed by some text. The heading needs to be an H1 and the text beneath should be subtitle1. We don't want to change the typography from say H1 to H4 for smaller screen sizes and we would like to keep it consistent irrespective what the screen size is.

00:49 The good news is if you're using Material-UI in your react application, you can definitely take advantage of responsive font size functionality. Let's look at the code for this example. We will try this example in CodeSandbox, so type codesandbox.io/ in your browser to get to this screen. To create a sandbox, we click Create Sandbox button here and it should be for React, so let's choose React. This gives an initial boilerplate code that comes with create react app. Next we would add an NPM dependency for Material-UI, so click on add dependency button and type Material-UI. We will choose the latest version that is available as of now, which is 4.6.1 You will see that Material-UI core dependency is available here. Now we can start removing the boilerplate code. That came with this template. We will remove the H1 tag and H2 tag to start with.

01:38 Now we start to get some imports from Material-UI including createMuiTheme. It allows you to generate your own custom theme given an options parameter. Next we also need responsive font sizes, which can automatically update the font size of your typography for every break point. Then we need a theme provider, which is the top level wrapper for all the components in the application and finally we need a typography component to display the heading and the text and all these imports are coming from Material-UI core. createMuiTheme takes an options object as argument containing custom colors or typography and returns a new theme for your react components. But here we are not customizing anything other than the phone sizes which should be responsive, we are not passing any arguments. Now we pass the theme returned from create MuiTheme() function above to this responsiveFontSizes() function.

02:27 This gives us the updated theme that would do the job of making the font sizes responsive. We now declare and define two constants heading with value, our work and the text containing the body that needs to be displayed beneath it. Inside this div we will have our muiThemeProvider() component that has a theme prop. We provide the value theme to this prop and by wrapping all your components inside muiThemeProvider() ensures that all the components get access to this custom theme. Finally inside our muiThemeProvider() component, we can add the typography component with variant h1, which renders its children using heading one. We also provide some gutter at the bottom and pass the value of heading that we created above and we can pretty much copy the same typography component. Change it's variant to subtitle1 and its child would be text instead of heading and that's it.

03:18 Now you can experiment and test with any break point without having to worry about writing multiple media queries for font sizes, especially when you want to use the same typography variant for all screens. Thanks for watching this video and let us know if there is a specific topic or component in Material-UI which is giving you trouble, we can cover that in the future videos. If you love to focus on specific programming problems and learn fast with these short videos, then subscribe to this channel. Until then, my friends keep learning and share your knowledge.