So füllen Sie gepunktete Linien aus

Question

Bitte helfen Sie mir, dieses Problem zu lösen Wie fülle ich in ReactJS eine Reihe von Punkten in den Leerraum zwischen Lebensmittelname und Preis aus? (Bildbeispiel) Ich verwende die Material-UI-Bibliothek für mein Projekt. Geben Sie hier eine Bildbeschreibung ein

Ich verwende die Material UI-Bibliothek für mein Projekt

<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>

Answer 1

您可以在食品名称和价格之间添加一个带有虚线边框的 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;
}

<div class="container">
  <p class="food_name">Hotdog</p>
  <div class="dashed_line"></div>
  <p class="food_price">$5.99</p>
</div>