TypographyProps

Determines the children nodes.

Specifies a list of CSS classes that will be added to the element.

Overrides the font size applied by the theme typography styles see example.

The possible values are:

• xsmall
• small
• medium
• large
• xlarge

Overrides the font weight applied by the theme typography styles see example.

The possible values are:

• light—font-weight: 300
• normal—font-weight: 400
• bold—For Default and Bootstrap themes—font-weight: 700. For Material theme—font-weight: 500.

Sets the id property of the top div element of the component.

Specifies the applied margin to the element see example.

The possible values for the Default and Material themes are:

• xsmall —Applies 4px margin.
• small —Applies 8px margin.
• medium —Applies 12px margin.
• large —Applies 16px margin.
• xlarge —Applies 24px margin.
• thin —Applies 2px margin.
• hair —Applies 1px margin.
• number —Passing a number will apply a margin of 4 times the passed number in pixels. The minimum number value is 0 and the maximum is 24.
• object &smdash;Passing an object allows setting the margins for each side.

The possible values for the Bootstrap theme are:

• xsmall —Applies 0.25rem margin.
• small —Applies 0.5rem margin.
• medium —Applies 0.75rem margin.
• large —Applies 1rem margin.
• xlarge —Applies 1.25rem margin.
• thin —Applies 0.125rem margin.
• hair —Applies 0.0625rem margin.
• number —Passing a number will apply a margin equal to the passed number divided by 4 in rem units.

The minimum number value is 0 and the maximum is 24.

• object &smdash;Passing an object allows setting the margins for each side.

Sets additional CSS styles to the element.

Specifies the text align see example.

The possible values are:

• left—Applies text-align: left
• right—Applies text-align: right
• center—Applies text-align: center
• justify—Applies text-align: justify

Specifies the text transform see example.

The possible values are:

• lowercase—Applies text-transform: lowercase
• uppercase—Applies text-transform: uppercase
• capitalize—Applies text-transform: capitalize

Specifies the theme color of the Typography see example.

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.
• inverse— Applies coloring based on inverse theme color.

You can use the style property to apply custom color related properties to the element.