CardHeader 元素副标题中的换行符（MaterialUI / ReactJS）

Question

I'm using pretty old Material UI (Ver. 0.20.1) components.

Here's a chunk of my code:

return(
  <>
    <Card>
      <CardHeader 
      actAsExpander={true}
      showExpandableButton={true}
      title = {user.name} 
      subtitle={`${user.email}, ${user.phone}, ${user.isproved ? "Yes" : "No"}, Friends: ${user.friends? user.friends : "None"}`} 
      />
    </Card>)

So i have a subtitle string with a bunch of variables in it that i wanted to use a line break to separate visually but adding \n or even '...string' + <br/> + 'string...' doesn't work. What should i do?

Answer 1

I can't test in a sandBox but if we look in the version 0.20.1 documentation of Material-ui we can read that:

property: subtitle type: node Can be used to render a subtitle in Card Header .

so you can create a node for example a list:

const subtitle =<ul><li>{user.email},</li><li>{user.phone},</li><li> {user.isproved ? "Yes" : "No"},</li><li> Friends: {user.friends? user.friends : "None"}</li></ul>;

and pass it to subtitle like this:

return(
  <>
    <Card>
      <CardHeader 
      actAsExpander={true}
      showExpandableButton={true}
      title = {user.name} 
      subtitle={subtitle} 
      />
    </Card>
</>
)

UPDATE:
I found a codeSanbox template so here a working example