在 MUI 中对齐文本第二行

Question

I have a problem on aligning the texts on the second line. It needs to be aligned with the first line.

Codesandbox CLICK HERE

<Card sx={{ maxWidth: 200 }}>
  <CardMedia
    component="img"
    height="140"
    image="/static/images/cards/contemplative-reptile.jpg"
    alt="green iguana"
  />
  <CardContent>
    <Typography gutterBottom variant="h5" component="div">
      Lizard
    </Typography>
    <Box>
      <Typography variant="body2" color="error">
        &bull; Hello how are you doing there?
      </Typography>
    </Box>
    <Box>
      <Typography variant="body2" color="error">
        &bull; Hi how are you doing there?
      </Typography>
    </Box>
  </CardContent>
  <CardActions>
    <Button size="small">Share</Button>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

Answer 1

Please try using ul html element and add some styles.

...
      <CardContent>
        <ul>
          <li>
            <Typography variant="body2" color="error">
              Hello how are you doing there?
            </Typography>
          </li>
          <li>
            <Typography variant="body2" color="error">
              Hi how are you doing there?
            </Typography>
          </li>
        </ul>
      </CardContent>
      ...

Answer 2

Put the bullet inside another Typography component and align it horizontally:

<Stack direction="row" gap={1}>
  <Typography variant="body2" color="error">
    &bull;
  </Typography>
  <Typography variant="body2" color="error">
    Hello how are you doing there?
  </Typography>
</Stack>

Before

After

Live Demo