[英]React Semantic UI component not rendering properly
I used create-react-app
to initialize my app. 我使用
create-react-app
初始化我的应用程序。 Then I did npm install semantic-ui-react --save
to install the package. 然后我做了
npm install semantic-ui-react --save
来安装包。
I want to create this Grid
example from https://react.semantic-ui.com/collections/grid#grid-example-divided-number : 我想从https://react.semantic-ui.com/collections/grid#grid-example-divided-number创建这个
Grid
示例:
I created a file called Grid.js
: 我创建了一个名为
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
Then in App.js
I imported 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;
However, when the web page loads the <p>
elements are stacked on top of each other - as if 6X1
instead of the intended 2X3
但是,当网页加载时,
<p>
元素堆叠在一起 - 好像是6X1
而不是预期的2X3
Why is the Grid
not being rendered properly? 为什么
Grid
没有正确呈现?
You are forgetting to add the CSS file. 您忘记添加CSS文件。
According to the docs: 根据文件:
This is the quickest way to get started with Semantic UI React.
这是开始使用Semantic UI React的最快方法。 You won't be able to use custom themes with this method.
您将无法使用此方法使用自定义主题。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
See https://react.semantic-ui.com/usage#css for more options on how to reference it 有关如何引用它的更多选项,请参阅https://react.semantic-ui.com/usage#css
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.