Use the MUI CSS helper classes to implement different text styles:
<div class="mui--text-display4">Display4</div>
<div class="mui--text-display3">Display3</div>
<div class="mui--text-display2">Display2</div>
<div class="mui--text-display1">Display1</div>
<div class="mui--text-headline">Headline</div>
<div class="mui--text-title">Title</div>
<div class="mui--text-subhead">Subhead</div>
<div class="mui--text-body2">Body2</div>
<div class="mui--text-body1">Body1</div>
<div class="mui--text-caption">Caption</div>
<div class="mui--text-menu">Menu</div>
<div class="mui--text-button">Button</div>
You can use the CSS color helpers to change the color:
<div class="mui--text-dark">dark</div>
<div class="mui--text-dark-secondary">dark-secondary</div>
<div class="mui--text-dark-hint">dark-hint</div>
<br />
<div style="background-color: #444">
<div class="mui--text-light">light</div>
<div class="mui--text-light-secondary">light-secondary</div>
<div class="mui--text-light-hint">light-hint</div>
</div>
<br />
<div class="mui--text-accent">accent</div>
<div class="mui--text-accent-secondary">accent-secondary</div>
<div class="mui--text-accent-hint">accent-hint</div>
<br />
<div class="mui--text-black">black</div>
<div class="mui--text-white" style="background-color: #444">white</div>
<div class="mui--text-danger">danger</div>
You can combine style and color helpers to implement the Material Design typography spec:
<div class="mui--text-dark-secondary mui--text-display4">Display4</div>
<div class="mui--text-dark-secondary mui--text-display3">Display3</div>
<div class="mui--text-dark-secondary mui--text-display2">Display2</div>
<div class="mui--text-dark-secondary mui--text-display1">Display1</div>
<div class="mui--text-dark mui--text-headline">Headline</div>
<div class="mui--text-dark mui--text-title">Title</div>
<div class="mui--text-dark mui--text-subhead">Subhead</div>
<div class="mui--text-dark mui--text-body2">Body2</div>
<div class="mui--text-dark mui--text-body1">Body1</div>
<div class="mui--text-dark-secondary mui--text-caption">Caption</div>
<div class="mui--text-dark mui--text-menu">Menu</div>
<div class="mui--text-dark mui--text-button">Button</div>
<div style="background-color: #444">
<div class="mui--text-light-secondary mui--text-display4">Display4</div>
<div class="mui--text-light-secondary mui--text-display3">Display3</div>
<div class="mui--text-light-secondary mui--text-display2">Display2</div>
<div class="mui--text-light-secondary mui--text-display1">Display1</div>
<div class="mui--text-light mui--text-headline">Headline</div>
<div class="mui--text-light mui--text-title">Title</div>
<div class="mui--text-light mui--text-subhead">Subhead</div>
<div class="mui--text-light mui--text-body2">Body2</div>
<div class="mui--text-light mui--text-body1">Body1</div>
<div class="mui--text-light-secondary mui--text-caption">Caption</div>
<div class="mui--text-light mui--text-menu">Menu</div>
<div class="mui--text-light mui--text-button">Button</div>
</div>
<div class="mui--text-accent-secondary mui--text-display4">Display4</div>
<div class="mui--text-accent-secondary mui--text-display3">Display3</div>
<div class="mui--text-accent-secondary mui--text-display2">Display2</div>
<div class="mui--text-accent-secondary mui--text-display1">Display1</div>
<div class="mui--text-accent mui--text-headline">Headline</div>
<div class="mui--text-accent mui--text-title">Title</div>
<div class="mui--text-accent mui--text-subhead">Subhead</div>
<div class="mui--text-accent mui--text-body2">Body2</div>
<div class="mui--text-accent mui--text-body1">Body1</div>
<div class="mui--text-accent-secondary mui--text-caption">Caption</div>
<div class="mui--text-accent mui--text-menu">Menu</div>
<div class="mui--text-accent mui--text-button">Button</div>