When should Typography be used in Material-UI?

Question

I'm using Material-UI and I'm a little confused. There is the component Typography but I can't really understand when to use it and what is its purpose.

When should Typography be used? What problem does it solve/helps or what benefits will I have if I use it while developing?

An example would be very good for me to understand it better.

Answer 1

As Dupocas said, it is the way of standardize the text.

Using a Typography you can standardize all the categories of text. For example, if you want all your titles to have the same size, font, weight ... you can use it like this:

<Typography variant="h1">My Title</Typography> 

For all your subtitles

<Typography variant="subtitle1">My SubTitle</Typography> 

With that component, you don't have to add a div with a specific className to your text in order to set specific styles. They all are applied on the Typography by default.

Typography have more properties you can pass, like "component" which let you choose the type of html tag to wrap your text. That wasn't the cases in previouse versions

<Typography variant="body1" component="p">       My Text </Typography> 

Material UI is a great library, making choices for you but letting you make your own choices. All the variants can be customized. You can take a look at Customization section to know how.

Please take look to Typography "API" section, it is useful and helpful.

Hope its helps.