Wie zeige ich in React zwei verschiedene Container nebeneinander an?

Question

Ich möchte das Bestellfeld und das Bestellmenü nebeneinander platzieren, es handelt sich um zwei verschiedene Komponenten (Container). In meinem CSS habe ich display:inline-block und flex-direction:row ausprobiert. Ich habe Flex für die übergeordnete Komponente (Order) ausprobiert, aber dadurch wird die Breite beider Komponenten verringert. Das ist so eine einfache Sache, aber ich kann es nicht tun. Kann mir jemand helfen, den Fehler zu finden?

import React from „react“;
Container importieren aus „@material-ui/core/Container“;
Stack importieren von „@mui/joy/Stack“;
OrderPanel aus „./OrderPanel“ importieren;
OrderMenu aus „./OrderMenu“ importieren;
import „./Order.css“;


Funktion Order() {
  zurückkehren (
    <>
      <div className="Order">
          <OrderPanel />
          <OrderMenu/>
      </div>
    </>
  );
  
};

Standardreihenfolge exportieren;

import React von „react“;
Container importieren aus „@material-ui/core/Container“;
Stack importieren von „@mui/joy/Stack“;
OrderPanel aus „./OrderPanel“ importieren;
import „./Order.css“;


Funktion OrderMenu() {
  zurückkehren (
    <>
      <div className="Order-Menu">
        <Container>Bestellmenü</Container>
      </div>
    </>
  );
}

Standard-OrderMenu exportieren;


import React aus „react“;
Container importieren aus „@material-ui/core/Container“;
Stack importieren von „@mui/joy/Stack“;
import „./Order.css“;
Bestellung aus „./Order“ importieren;

Funktion OrderPanel() {
  zurückkehren (
    <>
      <div className="Order-Panel">
        <Container>Auftragsbereich</Container>
      </div>
    </>
  );
}

Standard-OrderPanel exportieren;

.Order {
    Hintergrundfarbe:Dunkelkhaki;
    Höhe: 50 %;
    Flexrichtung: Reihe;
}

.Order-Panel{
    Hintergrundfarbe: Beige;
    Rand links: 2vw;
    Rand rechts: 60vw;
    Rand oben: 2vh;
    Höhe: 60vh;
    Breite: 50 Vh;
    Flexrichtung: Reihe;
    Anzeige: Inline-Block;
    
}

.Bestellmenü{
    Hintergrundfarbe: Aquamarin;
    Rand oben: 2vh;
    margin-left:2vw;
    Höhe: 10 vw;
    Breite: 45vh;
    Anzeige: Inline-Block;
    Flexrichtung: Reihe;
}

Answer 1

遵循 mui 文档（一种方法）

另一方面，要并排放置两个容器，您可以使用 Grid mui 组件

<Grid container spacing={2}>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
</Grid>

生成一个容器 结果输出