'what is difference between variant vs component in typography for library React Material UI
I am using React Material UI component. Typography component has 2 props, variant and component.What is the difference between these props.
Solution 1:[1]
Some predefine styles can be used with variant but final HTML element to be rendered can be set with component. e.g. you can use variant="body1" with component="h2" or variant="body2" with component="h2" that has smaller font-size.
Solution 2:[2]
variant => you use styles of normal html tag.
component => you use a React element for root node.
Solution 3:[3]
- variant: use styles of normal html tag
- component: make final result tag as this tag
- For example, variant="h5" component="h1"
- applied style: h5 tag
- final result tag: h1 tag (you can check: Chrome browser > deleveloment tool > Elements tab)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | BeHappy |
| Solution 2 | Thanh |
| Solution 3 | SeungHoonChoi |