Appearance
The Typography component provides many predefined appearance options such as configure the the alignment and transformation of the text, and also change the theme color.
Text Alignment
To set the text alignment of the element, use the textAlign
property.
The possible values are:
left
—Applies text-align: leftright
—Applies text-align: rightcenter
—Applies text-align: centerjustify
—Applies text-align: justify
Text Transformation
To set the text transformation of the element, use the textTransform
property.
The possible values are:
lowercase
—Applies text-transform: lowercaseuppercase
—Applies text-transform: uppercasecapitalize
—Applies text-transform: capitalize
Theme Color
To set the color of the element, use the themeColor
property.
The possible values are:
inherit
—Applies coloring based on the current color.primary
—Applies coloring based on primary theme color.secondary
—Applies coloring based on secondary theme color.tertiary
— Applies coloring based on tertiary theme color.info
—Applies coloring based on info theme color.success
— Applies coloring based on success theme color.warning
— Applies coloring based on warning theme color.error
— Applies coloring based on error theme color.dark
— Applies coloring based on dark theme color.light
— Applies coloring based on light theme color.inverse
— Applies coloring based on inverse theme color.
You can use the style
property to apply custom color related properties to the element.