Material UI Tutorial #2 - Typography

Key Takeaways

all right then gang so now we have material ui installed we can go ahead and start using the material ui components now the first one i want to show you is the typography component and generally the first thing i do when i'm using a new component i've never used before is just search for it in the material ui docs up here so if i type typo then it's going to come up typography and if we click on that we can see how this typography component is used if we scroll down so when we're using material ui we generally don't have to use h1 tags h2 tags paragraph tags etc instead we just use a typography component and then we can customize how that typography component is going to look and what tag it should be when it's output to the browser whether it should be an h1 or an h3 or a paragraph tag etc so you can see right here all of these different headings and paragraphs they are all output using the typography component and if we take a look at this show the source and scroll down here first of all you can see we import this typography component like so and if we scroll down further we can see we're using the typography here and here and here for all these different headings and paragraphs as well so all we do is nest our text in between the opening and closing typography component and then inside this component as props we can specify how we want this typography to look you can see we have this variant prop right here and this is us basically telling the typography components what we want it to be do we want it to be an h1 or rather do we want it to be styled like an h1 so it's big or styled like an h2 so it's quite big but not as big etc and there's all these different variants we can use you see we have this for essentially paragraph text but we have two different variants of paragraph tags body one and body two and also we see we have this component thing right here this specifies what tag is going to be output to the browser when we use this typography component so if we want it to look like an h1 which is what this variant thing does for us but we want it to output as an h2 tag we can override this and say the component should be in h2 by default if this wasn't here it would be output as an h1 because that's what we specified the variant to be but this is here to override that if we want to output it as something else so then let's give this a little whirl in our project all right then so i'm going to work inside one of our pages and it's going to be the create page right here and i want to use the typography component inside this react component so the first thing we have to do is import it so to do that i'm going to say import typography that's the components from and it's at material hyphen ui forward slash core forward slash the component name which is typography okay so there's two ways we can import things we can either import them like this or we can take off this part at the end of core and instead we can destructure the different components we need like so now it's entirely up to you which way you prefer this way is slightly less performant but only very slightly than the other way i probably will use a mix of ways i just wanted to let you know so now we're importing the typography components we can go ahead and use it in this page so let me do a few examples what i'm going to do is create a new typography component opening and closing tag and then inside we'll just say create a new note like so okay so now if i get rid of this create page at the top and save this i'm going to go over to the create page in the browser and we can see create a new note now if i inspect this and move this out a little bit you can see that by default it outputs a paragraph tag so that's the default typography tag now what if i want this to be something else for example an h1 well i can just add props so i can say variant is going to be equal to h1 like so and if i save this now and preview we can see that now it's an h1 tag over here and it's much bigger in the browser okay cool so generally when i add props to these different components i might be adding several different props and if i add them all going across this way pretty soon it's going to go off the screen so what i tend to do is move this down to the next line like so and then move this down and what i can do is add them one after another below each other so now we can also change the color of these typography components the text color and to do that we can pass in the colour prop now we can't just pass in any old colour here we can only pass in our different theme colours now we'll talk more about themes and colours later on but for now we'll just use one called primary so if i save that it's going to use the primary theme color which is kind of like this blue color by default this can also be secondary and we'll see that in a second but for now let's try adding another prop it's going to be an align prop this is used to align the text so we could align it to the center for example if i save that then it's going to be in the center cool all right then so let's try another example what i'm going to do is copy this and then i'm going to comment it out so it doesn't show and i'm going to paste it down here and change it so let's now try instead of primary secondary like this so this is another theme color and in fact what i'm going to do is take away this variant because i just want it to be a paragraph tag now and we'll also take away this align thing as well so if i save this and preview we can see now we get this ready pink color that is the secondary theme color now i'm going to get rid of this text and i'm going to use some lorem ipsum instead so let me just add that on and save it and preview and can you see how it goes over several different lines now we can add a no wrap prop to this so if i say no wrap camel case like so and save this take a look what happens you can see it truncates the text so when it reaches the end of the browser over here we get three little dots at the end of the text and it doesn't go over to the next line if i make this a bit bigger we can see it carries on so this is a nice way to truncate the text if you just want to show maybe a little preview or a snippet on one line of the text maybe on a blog preview on the homepage or something like that cool so there's many different things we can do with the typography component and if you want to see all of the different props that you can pass into the typography component you can go to the docs and if we just scroll down here right to the bottom and you'll see this api option click on this typography tag at the bottom and then scroll down and you can see all of the different props that we can pass in right here so we've seen a line we've seen color and these are the different things we can pass into color like i said you can't pass in any old hex code or anything like that just these different things and we'll take a look at these different theme values later in the course we can also pass in display or the component we talked about that before if we want to output the typography component as something else so not for example an h1 that we specify here but we could output it as an h3 instead and if we scroll down we can see we've also got this gutter bottom and if that's true then it's gonna have a bottom margin we've got no wrap loads of different things these are the variants right here so we've seen each one we've also got things like body one body two captions etc so you can have a little play around with those as well what i'm going to do is delete all of this that we've got so far and i'm going to create a new typography component and this is going to be for the header on this page and the header is going to be create a new notes then inside we'll add a few props so the first thing i want this to be is an h6 so i'm going to say variance and set that equal to h6 now if we take a look at this i'm going to save it and preview over here this is the kind of size i want it to be so it's styled like an h6 and also we're outputting an h6 tag right here now it's fine how it looks but i actually want it to be an h2 so what i'm going to do is add in the component prop like so and set that equal instead to h2 now this is still going to look like the h6 because we have the variant set to h6 but the actual html right here is outpoint h2 and that's what i want okay so next i'm going to apply a gutter bottom so let me say gutter bottom like so now i don't need to set it equal to true or anything all i need to do is pass in the prop name and that will set it equal to true automatically and now if we hover over this we can see that orange little margin below the text and then finally i want to change the color of this so let me add in a color prop up here and i'm going to set that equal to text secondary like so oops secondary i spot this correctly yep save that and preview and we can see now this is a grayish color don't get this confused with secondary that's the secondary theme color which is at the minute pink this is text secondary which is kind of like a grayish colour that's the colour that i want for this heading so there we go my friends that is the typography component as you can see it's pretty flexible and i find myself never really needing to use an actual paragraph tag or an h1 or an h2 or anything like that directly i just use this typography component instead so definitely have a play around with the other props that we can pass into this typography component we will be using it a lot as we go forward as well but next up i want to take a look at a different component buttons