Bagaimana untuk memaparkan 2 bekas berbeza bersebelahan dalam React?

Question

Saya ingin meletakkan panel pesanan dan menu pesanan bersebelahan, ia adalah dua komponen berbeza (bekas). Dalam CSS saya, saya cuba paparan: inline-block dan flex-direction:row. Saya telah mencuba flex pada komponen induk (Pesanan) tetapi ia mengurangkan lebar kedua-dua komponen. Ini adalah perkara yang mudah tetapi saya tidak boleh melakukannya. Bolehkah seseorang membimbing saya untuk mencari ralat?

import React daripada "react";
import Bekas daripada "@material-ui/core/Container";
import Stack daripada "@mui/joy/Stack";
import OrderPanel daripada "./OrderPanel";
import OrderMenu daripada "./OrderMenu";
import "./Order.css";


fungsi Perintah() {
  kembali (
    <>
      <div className="Pesanan">
          <Panel Pesanan />
          <Menu Pesanan/>
      </div>
    </>
  );
  
};

eksport Pesanan lalai;

import React daripada "react";
import Bekas daripada "@material-ui/core/Container";
import Stack daripada "@mui/joy/Stack";
import OrderPanel daripada "./OrderPanel";
import "./Order.css";


fungsi OrderMenu() {
  kembali (
    <>
      <div className="Order-Menu">
        <Bekas>Menu Pesanan</Bekas>
      </div>
    </>
  );
}

eksport Menu Pesanan lalai;


import React daripada "react";
import Bekas daripada "@material-ui/core/Container";
import Stack daripada "@mui/joy/Stack";
import "./Order.css";
import Pesanan daripada "./Order";

fungsi OrderPanel() {
  kembali (
    <>
      <div className="Panel Pesanan">
        <Bekas>Panel Pesanan</Bekas>
      </div>
    </>
  );
}

eksport PesananPanel lalai;

.Pesan {
    warna latar belakang:darkhaki;
    ketinggian: 50%;
    flex-direction: baris;
}

.Panel Pesanan{
    warna latar belakang: kuning air;
    jidar-kiri: 2vw;
    margin-kanan: 60vw;
    jidar atas: 2vh;
    ketinggian: 60vh;
    lebar: 50vh;
    flex-direction: baris;
    paparan: inline-block;
    
}

.Menu Pesanan{
    warna latar belakang: aquamarine;
    jidar atas: 2vh;
    jidar-kiri:2vw;
    ketinggian:10vw;
    lebar: 45vh;
    paparan: inline-block;
    flex-direction: baris;
}

Answer 1

Ikuti dokumentasi mui (sehala)

Sebaliknya, untuk meletakkan dua bekas bersebelahan, anda boleh menggunakan komponen 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>

Jana bekas Hasil keluaran