Typography vs HTML tags

Question

I am ambiguous using between <Typography/> tag and normal HTML tags like <p>.

<Box className={someClassName}>
  <Typography>{someVariableName}</Typography>
</Box>

or

<p className="someClassName">{someVariableName}</p>

both serve the purpose and yet mui typography is what mui has introduced and I've seen it being used in MUI apps. my doubt is what is the specific advantage I'm getting while using <Typography> tag? In order to style it, I have to use 2 tags ie <Box> and <Typography>.

but where as with HTML, I can save some typing by using <p> tag or <h1> or whatever text display tags. so, why I should use <Typography>.

only on <Box> I can write CSS classes, but for HTML directly on <p> tags I can use CSS either inline or class names.

Answer 1

First of all when you’re using MUI tags it’s better to use them all for your code to be clean and readable for others. Using <Box><p></p></Box> is not good although it works. And another thing is that you don't have to wrap Typography in a Box unless you wanted to wrap a p in a div. So, you can use Typography alone itself. Second, the advantage of using Typography is that you can give inline Css to it and there is no need to have external stylesheet, for example:

<Typography lineHeight={2} fontWeight={600} mt={2} color={"red"}> some text here </Typography>

And I can say that I’m pretty sure that there is nothing you can’t do with Typography 😊

Another example for using <p> some <span> text </span> here</p> you should use an attribute (component={"span"}) for Typography:

<Typography fontSize={12}>some <Typography component={"span"} fontSize={14} bgcolor={“yellow”}>text</Typography>here</Typography>

The third advantage is that when you are using themes (dark or light) from MUI it will automatically apply to Typography but when use p the theme doesn’t apply to it and you should change it manually. There are more advantages but I hope these three items have helped you so far 😉