1
我用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
沒有被正確地呈現?
感謝更多的選擇見https://react.semantic-ui.com/usage#css .......... – user2456977