如何将这些文本和图标并排放置？

Question

我有这些文字和图标，它们彼此相距很远

如何将图标放在文本的右侧？像这样：

Water Jug->

Codesandbox：https://codesandbox.io/s/responsivestack-material-demo-forked-330ogi?file=/demo.js

代码：

<Grid
      container
      spacing={{ xs: 2, md: 3 }}
      columns={{ xs: 4, sm: 8, md: 12 }}
    >
      {product &&
        product.map((item, i) => (
          <Grid item xs={2} sm={4} md={4} key={i}>
            <Stack direction="row" spacing={2}>
              <ListItemText primary={item.prodName} />
              <ListItemIcon>
                <ArrowForwardIcon style={{ marginLeft: "1px" }} />
              </ListItemIcon>
            </Stack>

          </Grid>
        ))}
    </Grid>

Answer 1

替换为：

  <div style={{display: "flex", flexDirection: "row",  alignItems: "center"}}>
     <ListItemText primary={item.prodName} />
     <ListItemIcon>
       <ArrowForwardIcon style={{ marginLeft: "1px" }} />
     </ListItemIcon>
  </div>

如何将这些文本和图标并排放置？

How do I put these text and icon side by side?

javascript

reactjs

material-ui