keep new line in <ExpansionPanelDetails> of material UI

Question

I got a expanded panel looks as following:

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

I need the contents in ExpansionPanelDetails keep multiple lines:

line 1
line 2
line 3

But it actually is:

line 1line 2line 3

I tried wrap <Typography> with<div> and add <br />. All couldn't work.

Any ideas?

Thanks!

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

Answer 1

ExpansionPanelDetails actually displays as a flex container. Thus you could simply change the flex-direction.

Using the Material UI examples this could look something like this:

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

If you prefer a running codesandbox: https://codesandbox.io/s/zn8v57mo23