Question

我正在使用material-ui创建一个计算器。

在使用ID date_first date_special nr_types_before 35902743897 2014-10-20 2014-10-20 0 35902767371 2016-07-27 2016-07-27 0 35902767756 2015-09-25 2015-09-25 0 35902772607 2010-08-04 2010-08-04 0 35902816112 2013-12-19 2013-12-19 0 35903616362 2014-10-02 2014-10-02 0 35903663981 2010-01-06 2010-01-19 1之前，我有以下内容：

<ExpansionPanel>

这成功渲染了一个计算器，其 calculation 和 last result 文本与计算器屏幕（即CardHeader）中的“右侧”对齐。

一旦我开始工作，我希望能够扩展/折叠计算器。

折叠状态：仅屏幕
展开状态：屏幕+按钮

这是我所做的：

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>
)

但是，现在我的计算器屏幕在视觉上显示了向左对齐的标题/副标题排版（即使实际上是右对齐的）。

除此之外，计算器的外观和行为符合我的期望。

然后我的问题是，如何使用此设置将return ( <ExpansionPanel style={{width: '270px'}}> <ExpansionPanelSummary> {/*Screen*/} </ExpansionPanelSummary> <ExpansionPanelDetails style={cardStyle}> {/*Buttons*/} </ExpansionPanelDetails> </ExpansionPanel> )的印刷文字正确地向右对齐？

素材用户界面：使用ExpansionPanel时，CardHeader字体“正确对齐”不起作用

0 个答案: