'How to put text inside ListItem on the right side?

I have these now, and the "YoYo" text are aligned to the left (as default). And I'd like to control the "YoYo" texts' positions so some of them could appear on the right.

I tried to supply a style object with justifyContent:'flex-end' or alignSelf:'flex-end' but none of them is working.

  <List>
    <ListItem containerElement={<ChatObject id='1' value="YoYo" style={{alignSelf:'flex-end'}} />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
    <ListItem containerElement={<ChatObject id='1' value="YoYo" />} />
  </List>

The ChatObject is defined as:

render() {
    return (
      <TextField
        id={this.props.id}
        value={this.props.value}
        underlineShow={false}
      />
    );
  }
cssreactjsflexboxmaterial-ui


Solution 1:[1]

You can do that by giving style like

  text-align: right;

So it will be textAlign: 'right' in style object.

Don't forget giving proper width too.

Solution 2:[2]

At first look, you should pass the style props to the sub-element one by one until the DOM element.
For example:<TextField style={props.style} />

Solution 3:[3]

You can use <ListItemText /> component which gets props like "primary" and "secondary". You can pass to primary/secondary node element like <Typography /> that has textAlign property.

<ListItem divider={divider}>
  <ListItemText
    inset
    primary={
      <Paper sx={{ p: 2, backgroundColor: orange[50] }}>
        <Typography noWrap={false} sx={{ wordBreak: 'break-all' }} variant='h5'>
          {item.value}
        </Typography>
      </Paper>
    }
    secondary={
      <Typography textAlign={item.left ? 'left' : 'right'}>
        your text here...
      </Typography>
    }
  />
</ListItem>

enter image description here

Be careful on variant as 'caption' as it will make the text a span element that does not listen to the text-align property.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Geono
Solution 2 SHZhao74
Solution 3

Related Questions