Пользовательский интерфейс материала: типография CardHeader "выровнять по правому краю" не работает при использовании ExpansionPanel

Question

Я создаю калькулятор, используя material-ui .

До использования <ExpansionPanel> у меня было следующее:

const cardStyle = {
  display: 'block',
  width: '250px',
  height: '325px'
}

const screenProps = {
  title: '0', // main calculation
  titleTypographyProps: {align: 'right'},
  subheader: '0', // last calculated result
  subheaderTypographyProps: {align: 'right'}
}

return (
  <Card raised style={cardStyle}>
    {/*Screen*/}
    <CardHeader {...screenProps}/>
    <Divider/>
    {/*Buttons*/}
    <CardContent>
      <Button size="small">0</Button>
      <Button size="small">+</Button>
      <Button size="small">=</Button>
      {/*etc*/}
    </CardContent>
  </Card>
)

Это успешно отрендеренокалькулятор с вычислением и последним результатом текстом, выровненным по правому краю на экране калькулятора (т. е. CardHeader)

После того, как я заработал, я хотелбыть в состоянии развернуть / свернуть калькулятор так, чтобы.

• Свернутое состояние: только экран
• Расширенное состояние: экран + кнопки

Вот что яdid:

return (
  <ExpansionPanel style={{width: '270px'}}>
    <ExpansionPanelSummary>
      {/*Screen*/}
    </ExpansionPanelSummary>
    <ExpansionPanelDetails style={cardStyle}>
      {/*Buttons*/}
    </ExpansionPanelDetails>
  </ExpansionPanel>
)

Однако теперь на экране моего калькулятора визуально отображается типография заголовка / подзаголовка, выровненная по левому краю (даже если они на самом деле выровнены по правому краю).

Кроме этого, калькулятор выглядит и ведет себя так, как я хочу.

Мой вопрос в том, как правильно выровнять типографский текст для <CardHeader> вправо, используя эту настройку?