what is difference between variant vs component in typography for library React Material UI

user_1388835 0
Viewed 2612

I am using React Material UI component. Typography component has 2 props, variant and component.What is the difference between these props.

react-material reactjs
3 Answers

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.

user_86101270

variant => you use styles of normal html tag.

component => you use a React element for root node.

user_10816680
  1. variant: use styles of normal html tag
  2. component: make final result tag as this tag
  3. For example, variant="h5" component="h1"
    • applied style: h5 tag
    • final result tag: h1 tag (you can check: Chrome browser > deleveloment tool > Elements tab)
user_189876680
Related