React Material UI Tutorial - 3 - Typography

in this video let's discuss about typography in material ui now typography basically deals with the style and appearance of text on your website if your website has text content with way too many styles or font sizes it sort of spoils the ui to address this concern material ui provides typography levels each level has a definite font size font weight and line height let's take a closer look at the different typography levels in the components folder i'm going to create a new file called mui typography dot tsx dot tsx since we are working with typescript in this series within the file i'm going to use the snippet rafc to create a function component to use material ui's typography we first need to import it so at the top typography from at mui material now let's invoke this component in the jsx opening and closing tag now there are 13 different variations of this component but we are going to take a look at 10 important ones in this video first we are going to look at the heading variance specify the variant we use the variant prop and for headings the variant ranges from h1 to h6 let me create all of them so variant is equal to h1 and the text or the content between the opening and closing tags is h1 heading i'm going to duplicate five times and change h1 to h2 h3 4 5 and 6. let me also make sure i've spelt typography correctly now let's include this component in app component and head to the browser you can see how they appear on the web page variant h1 has the largest size and the size decreases as we move towards h6 but what is great is that they carry the semantic element with them if i inspect you can see the html elements are h1 h2 h3 till h6 they are not just div tags with some styling now there are two more variants of the h6 tag that you can use and doesn't stand out as much as the h6 variant they are subtitle one and subtitle two so i'm going to make two more copies of typography and change the variant to subtitle 1 and subtitle 2. this is subtitle 1. and this is subtitle 2. take a look at the browser and we have subtitle 1 and 2 being displayed if i inspect the element you can see they are also h6 elements however they have different styles subtitle 1 has a larger font size but lesser font weight and subtitle 2 is the other way around depending on your use case you can use these two variants as well the final two variants are related to body text if you have paragraphs of text which you need to display you can make use of body 1 and body 2 as variants so make a copy of the typography tag again change subtitle 1 to body 1 and subtitle 2 variant to body 2. the inner text though since we need good amount of content i'm going to add lorem ipsum text so just type in lorem and tab and it populates the text for us to work with if we take a look at the browser you can see the two variants have a paragraph tag as the element body 1 is the default 16 pixels normal font weight element and body 2 is a smaller version of it what you should also know is body 1 is the default value of the variant prop so if i remove variant is equal to body one head back to the browser there is no change and body one class is still present on the paragraph tag so body 1 and body 2 are in fact rendered as paragraph html elements now the font sizes and font weights are all defaults from material ui you can however change it when configuring the theme theme and customization however is something we will learn later on in the series but since we will be using default theme as we come across different components i want to quickly point you at the right resource in the material ui docs under customization navigate to default theme scroll down and click on expand all this gives you the default theme that material ui uses for example the different values for breakpoints the color palette for our application spacing values shadows and we also have the typography styles these are the styles applied to our typography variants we've just seen whenever we learn a new component and i make use of a style from the theme i would like you to refer back to this theme object and understand what is the style being applied at the end of this course i'll also teach you how to customize this theme so you don't have to always rely on the default values now the next point about typography component is that you can change the semantic element using the component prop for example i want to use the h4 tag as the heading element in every page however i want the underlying html tag to be h1 and not h4 for that we can specify component is equal to h1 and if we now take a look at the browser inspect the h4 element you can see we have the same styles but the html element is an h1 element and this is really important for semantics the final prop i would like to highlight is gutter bottom on the h4 variant i'm going to set gutter bottom by default its value is false if you do specify it on the component however the text will have a bottom margin if we head to the browser and i hover on h4 you can see the margin at the bottom what is great as well is the margin is dependent on the variant larger variants have more margin than smaller variants typically when you specify page titles or section headings adding a bit of space at the bottom is common and gutter bottom is the best way to do that so that is about typography in material ui one component with a set of variants concerned with appearance of text in your application in the next video let's take a look at one of the most fundamental html elements which is the button element thank you for watching make sure to subscribe to the channel and i'll see you in the next one

Channel: Codevolution

Views: 122,224

Keywords: Codevolution, React, React Material UI, Material UI, Material UI React, MUI, React MUI, MUI React, Typography, Material UI Typography, Typography in Material UI

Id: r42jcDXSFM0

Length: 9min 1sec (541 seconds)

Published: Thu Mar 03 2022