MUI - 用虚线连接头像

Question

我有一堆头像，带有文字：

<Stack>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#c00500' }} variant="square">C</Avatar>Today</span>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#05C000' }} variant="square">V</Avatar>Yesterday</span>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#c00500' }} variant="square">C</Avatar>Yesterday</span>

</Stack>

我想要一条虚线连接方框，如下所示：

怎样才能达到这样的效果？

Answer 1

我认为你不能用MUI真正做到这一点，也许在包含所有内容的div内创建一个div，并使其成为虚线，使位置绝对并将其放置在你需要的方式，但确保容器div有相对位置。