javascript - React Grid列未在列中显示组件

Question

我正在学习 react（具有 js/html/css 基础知识），正在练习一些 react 项目。因此，在我的项目中，我需要将一些组件保留在 Grid 列中，并且我希望这些组件按列显示（在我的参考教程中它按预期工作），但我看到它对我来说是按行呈现的。感谢您对此的解释，因为我看到了不同的行为。

版本：语义用户界面反应：“^0.82.1”，反应：“^16.4.1”

import React from 'react';
import { Grid }  from 'semantic-ui-react';
import "./App.css";
import ColorPanel from './ColorPanel/ColorPanel';
import SidePanel from './SidePanel/SidePanel';
import Messages from './Messages/Messages';
import MetaPanel from './MetaPanel/MetaPanel';


const App =()=>(
  <Grid columns="equal" >  
    <ColorPanel/>
    <SidePanel/>
  <Grid.Column style={{marginLeft:320}}>
    <Messages/>
  </Grid.Column>
  <Grid.Column width={4} >
    <MetaPanel/>
  </Grid.Column>
  </Grid>
  
);

export default App;

我的预期显示：（我没有预期显示的img ref，请原谅。他们只需要在列中）

Colorpanel Sidepanel Messages Metapanel

我的程序得到了什么：

标签： javascriptreactjssemantic-ui-react