Menu
I am using React Material UI component. Typography component has 2 props, variant and component.What is the difference between these props.
230
asked Jan 19 '21 06:01
variant => you use styles of normal html tag. component => you use a React element for root node. about "you use styles of normal html tag": well, img for example is a "normal html tag", what do you mean by "using" its styles?
variant: It is used to set the theme typography styles. Example: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button, overline, srOnly or inherit. classes: It is the custom CSS object to override the styles. paragraph: If this is true the text will have a bottom margin. Example: true or false.
Use the variant API to apply complex styles to a component based on a single prop. This can be a handy way to support slight stylistic variations in button or typography components. Import the variant function and pass variant style objects in your component definition.
import Typography from '@material-ui/core/Typography'; // OR import { Typography } from '@material-ui/core'; Syntax: It sets the alignment property. Property Values: left: It aligns text along the left side of a page or containing element.
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.
139
variant => you use styles of normal html tag.
component => you use a React element for root node.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
