我曾经create-react-app
初始化我的应用程序。然后我确实npm install semantic-ui-react --save
安装了软件包。
我想从https://react.semantic-ui.com/collections/grid#grid-example-divided-numberGrid
创建这个例子:
我创建了一个名为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
没有正确渲染?