React語義UI組件不能正確呈現

我用create-react-app來初始化我的應用程序。然後我做了npm install semantic-ui-react --save來安裝這個軟件包。React語義UI組件不能正確呈現

我想從https://react.semantic-ui.com/collections/grid#grid-example-divided-number創建此Grid例如：

我創建了一個名爲Grid.js文件：

import React from 'react' 
import { Grid } from 'semantic-ui-react' 

const GridExample =() => (
    <Grid columns={3} divided> 
    <Grid.Row> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
    </Grid.Row> 

    <Grid.Row> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
    </Grid.Row> 
    </Grid> 
) 

export default GridExample

然後在App.js我進口GridExample：

import React, { Component } from 'react'; 
import GridExample from './Grid' 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 

     <GridExample /> 

     </div> 
    ); 
    } 
} 
export default App;

然而，當網頁加載<p>元素堆疊在彼此的頂部 - 彷彿6X1而不是預期的2X3

爲什麼Grid沒有被正確地呈現？

來源

2017-05-26 user2456977