Comment afficher 2 conteneurs différents côte à côte dans React ?

Question

Je souhaite placer le panneau de commande et le menu de commande côte à côte, ce sont deux composants (conteneurs) différents. Dans mon CSS, j'ai essayé display: inline-block et flex-direction:row. J'ai essayé flex sur le composant parent (Order) mais cela réduit la largeur des deux composants. C'est une chose si simple mais je ne peux pas le faire. Quelqu'un peut-il me guider pour trouver l'erreur ?

importer React depuis "react" ;
importer un conteneur depuis "@material-ui/core/Container" ;
importer Stack depuis "@mui/joy/Stack" ;
importer OrderPanel depuis "./OrderPanel" ;
importer OrderMenu depuis "./OrderMenu" ;
importer "./Order.css" ;


fonction Ordre() {
  retour (
    ≪>
      <div className="Commande">
          <OrderPanel />
          <MenuCommande/>
      </div>
    ≪/>
  );
  
} ;

exporter la commande par défaut ;

importer React depuis « react » ;
importer un conteneur depuis "@material-ui/core/Container" ;
importer Stack depuis "@mui/joy/Stack" ;
importer OrderPanel depuis "./OrderPanel" ;
importer "./Order.css" ;


fonction CommandeMenu() {
  retour (
    ≪>
      <div className="Commande-Menu">
        <Conteneur>Menu Commande</Conteneur>
      </div>
    ≪/>
  );
}

exporter le menu Commande par défaut ;


importer React depuis « react » ;
importer un conteneur depuis "@material-ui/core/Container" ;
importer Stack depuis "@mui/joy/Stack" ;
importer "./Order.css" ;
importer la commande depuis "./Order" ;

fonction CommandePanel() {
  retour (
    ≪>
      <div className="Order-Panel">
        <Conteneur>Panneau de commande</Conteneur>
      </div>
    ≪/>
  );
}

exporter le OrderPanel par défaut;

.Ordre {
    couleur d'arrière-plan : kaki foncé ;
    hauteur : 50 % ;
    direction flexible : rangée ;
}

.Panneau de commande{
    couleur de fond : beige ;
    marge gauche : 2vw ;
    marge droite : 60 vw ;
    marge supérieure : 2vh ;
    hauteur : 60vh ;
    largeur : 50vh ;
    direction flexible : rangée ;
    affichage : bloc en ligne ;
    
}

.Menu-Commande{
    couleur de fond : aigue-marine ;
    marge supérieure : 2vh ;
    marge gauche : 2vw ;
    hauteur : 10 vw ;
    largeur : 45vh ;
    affichage : bloc en ligne ;
    direction flexible : rangée ;
}

Answer 1

Suivez la documentation mui (aller simple)

Par contre, pour placer deux conteneurs côte à côte, vous pouvez utiliser le composant 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>

Générer un conteneur Sortie des résultats