CODEWITHSUNDEEP
cssreactjsmaterial-ui
Joseph
Joseph

Reputation: 7765

Align text second line in MUI

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>

Upvotes: 2

Views: 764

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81663

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

enter image description here

After

enter image description here

Live Demo

Codesandbox Demo

Upvotes: 2

hotcakedev
hotcakedev

Reputation: 2515

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

Upvotes: 0

Related Questions