Reactで2つの異なるコンテナを並べて表示するにはどうすればよいですか?

Question

注文パネルと注文メニューを並べて配置したいのですが、これらは 2 つの異なるコンポーネント (コンテナ) です。私のCSSでは、display: inline-blockとflex-direction:rowを試してみました。親コンポーネント（Order）でフレックスを試しましたが、両方のコンポーネントの幅が減少します。とても単純なことですが、私にはそれができません。誰かがエラーを見つける方法を教えてくれますか?

React を "react" からインポートします。
"@material-ui/core/Container" からコンテナをインポートします。
"@mui/joy/Stack" からスタックをインポートします。
"./OrderPanel" から OrderPanel をインポートします。
"./OrderMenu" から OrderMenu をインポートします。
"./Order.css" をインポートします。


関数 Order() {
  戻る （
    <>
      <div className="注文">
          <オーダーパネル />
          <メニューの注文/>
      </div>
    </>
  );
  
};

デフォルトの順序をエクスポートします。

「反応」から React をインポートします。
"@material-ui/core/Container" からコンテナをインポートします。
"@mui/joy/Stack" からスタックをインポートします。
"./OrderPanel" から OrderPanel をインポートします。
"./Order.css" をインポートします。


関数 OrderMenu() {
  戻る （
    <>
      <div className="オーダーメニュー">
        <コンテナ>メニューを注文</コンテナ>
      </div>
    </>
  );
}

デフォルトの OrderMenu をエクスポートします。


「反応」から React をインポートします。
"@material-ui/core/Container" からコンテナをインポートします。
"@mui/joy/Stack" からスタックをインポートします。
"./Order.css" をインポートします。
「./Order」から注文をインポートします。

関数 OrderPanel() {
  戻る （
    <>
      <div className="オーダーパネル">
        <コンテナ>注文パネル</コンテナ>
      </div>
    </>
  );
}

デフォルトの OrderPanel をエクスポート;

.Order {
    背景色:ダークカーキ;
    高さ: 50%;
    フレックス方向: 行;
}

.オーダーパネル{
    背景色: ベージュ;
    マージン左: 2vw;
    マージン右: 60vw;
    マージントップ: 2vh;
    高さ: 60vh;
    幅: 50vh;
    フレックス方向: 行;
    表示: インラインブロック;
    
}

.Order-Menu{
    背景色: アクアマリン;
    マージントップ: 2vh;
    マージン左:2vw;
    高さ:10vw;
    幅: 45vh;
    表示: インラインブロック;
    フレックス方向: 行;
}

Answer 1

mui ドキュメントに従ってください (一方向)

一方、2 つのコンテナを並べて配置するには、Grid mui コンポーネント

を使用できます。 リーリー

コンテナを生成する 結果出力