reactjs - 在 Material UI 的 中保留新行

Question

我得到了一个扩展面板，如下所示:

  <ExpansionPanel>
    <ExpansionPanelSummary>this is a title</ExpansionPanelSummary>
    <ExpansionPanelDetails>
      <Typography>line 1</Typography>
      <Typography>line 2</Typography>
      <Typography>line 3</Typography>
    </ExpansionPanelDetails>
  </ExpansionPanel>

我需要ExpansionPanelDetails中的内容保留多行:

line 1
line 2
line 3

但实际上是:

line 1line 2line 3

我尝试换行 <Typography>与 <div>并添加<br /> 。一切都无法工作。

有什么想法吗？

谢谢!

"@material-ui/core": "^3.7.0"

Answer 1

ExpansionPanelDetails 实际上显示为弹性容器。因此，您可以简单地更改 flex-direction。

使用 Material UI 示例，这可能看起来像这样:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";

const styles = theme => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  },
  details: {
    flexDirection: "column"
  }
});

function SimpleExpansionPanel(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <ExpansionPanel>
        <ExpansionPanelSummary>this is a title</ExpansionPanelSummary>
        <ExpansionPanelDetails className={classes.details}>
          <Typography>line 1</Typography>
          <Typography>line 2</Typography>
          <Typography>line 3</Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}

SimpleExpansionPanel.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleExpansionPanel);

如果您更喜欢运行的codesandbox:https://codesandbox.io/s/zn8v57mo23