How it works...

The value that you pass to the variant property determines the styles that are applied to the text. The styles for each of these variants are defined by the theme, and can be customized from theme to theme.

It can be tempting to add your own variant names, or to add font styles outside of the typography variants. I would advise against this, because doing so breaks the common font vocabulary based on Material Design. If you stray from the typography variant conventions, you'll end up with variant names that only make sense to you, or worse, variants that don't work because of font styles applied to text from outside of the typography system.

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.