请帮我解决这个问题 如何在reactjs中的食物名称和价格之间的空白处填写一行点？ （图片示例） 我正在为我的项目使用 Material UI 库，在此处输入图像描述
我正在为我的项目使用 Material UI 库
<Grid container spacing={2}>
{coffeeMenu.map((item, index) => (
<Grid item xs={6} key={index}>
<Link
underline='none'
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
px: 5,
fontWeight: 'bold',
color: '#000',
'&:hover': {
color: '#D8AE78',
cursor: 'pointer',
},
}}
>
<Typography>{item.name}</Typography>
<Typography>{item.price}đ</Typography>
</Link>
</Grid>
))}
</Grid> 
您可以在食品名称和价格之间添加一个带有虚线边框的 div。我需要查看您的代码来准确地向您展示如何实现，但类似这样的东西可以工作：
.container { width: 50%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .food_name { margin-right: 20px; } .food_price { margin-left: 20px; } .dashed_line { flex: 1; border-top: 1px dashed black; }