如何在React列表组件中将Amount属性值移至右侧？

我没法把amount属性的值移到列表组件的右侧。试过修改Typography组件、React.Fragment，也用sx样式调整，但都没效果，不知道是不是要新建组件，或者该用什么组件来放{amount}。

原代码 #

type ExploreCardsProps = {
    avatar: string
    headgear: string
    amount: number
}

const ListText = styled(ListItem)(() => ({
    color: "white",
}))

export function ExploreCards ({avatar, headgear, amount} : ExploreCardsProps)  {
  return (
    <Grid
      container
      direction="column"
      alignItems="center"
    >
      <Grid item xs={3}>
        <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'black'}}>
          <ListText alignItems="flex-start">
            <ListItemAvatar>
              <Avatar alt="Luis" src= {avatar} />
            </ListItemAvatar>
            <ListItemText 
              primary="Headgear"
              secondary={
                <React.Fragment>
                  <Typography color="#ffffff"
                    sx={{ display: 'inline'}}
                    variant="body2"
                    component="span"
                  >
                    {headgear}
                  </Typography>
                  {amount}
                </React.Fragment>
              }
            />
          </ListText>
          <Divider variant="inset" component="li" />
        </List>
      </Grid>
    </Grid>
  );
}

核心问题是你把amount放在了ListItemText的文本块内部，没法单独控制对齐。MUI的ListItem默认是flex布局，只需要把amount作为ListItem的独立子元素，利用flex的margin-left: auto就能推到右侧。

修改后的代码：

import { Grid, List, ListItem, ListItemAvatar, Avatar, ListItemText, Typography, Divider, Box } from '@mui/material';
import styled from '@mui/material/styles/styled';

type ExploreCardsProps = {
  avatar: string;
  headgear: string;
  amount: number;
};

const ListText = styled(ListItem)(() => ({
  color: "white",
}));

export function ExploreCards({ avatar, headgear, amount }: ExploreCardsProps) {
  return (
    <Grid container direction="column" alignItems="center">
      <Grid item xs={3}>
        <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'black' }}>
          <ListText alignItems="center">
            <ListItemAvatar>
              <Avatar alt="Luis" src={avatar} />
            </ListItemAvatar>
            <ListItemText 
              primary="Headgear"
              secondary={
                <Typography 
                  color="#ffffff"
                  variant="body2"
                  component="span"
                >
                  {headgear}
                </Typography>
              }
            />
            {/* 用Box包裹amount，设置margin-left:auto实现右对齐 */}
            <Box sx={{ color: 'white', marginLeft: 'auto' }}>
              {amount}
            </Box>
          </ListText>
          <Divider variant="inset" component="li" />
        </List>
      </Grid>
    </Grid>
  );
}

关键调整点 #

• 将amount从ListItemText的secondary中移出，作为ListItem（也就是你定义的ListText）的直接子元素。
• 用Box（或Typography）包裹amount，通过marginLeft: 'auto'让它自动占据剩余空间，从而对齐到右侧。
• 无需新建额外组件，利用MUI自带的布局组件即可实现需求。

内容的提问来源于stack exchange，提问作者Carlos Salame