Formatting panel headers

Headers in ExpansionPanel components can be formatted. Typically, the Typography component is used to render text within an expansion panel header. This means that you can use properties of Typography to customize the way that your expansion panel headers appear.

How to do it...

Let's say that you want the text within your ExpansionPanel headers to stand out relative to the text in the content section of each panel. You can change the variant property of the Typography component in the ExpansionPanelSummary component. Here's the code to do it:

import React, { Fragment } from 'react';

import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary...