React Semantic UI 组件未正确呈现答案

【问题标题】：React Semantic UI component not rendering properlyReact Semantic UI 组件未正确呈现
【发布时间】：2017-05-26 00:14:23
【问题描述】：

我使用create-react-app 来初始化我的应用程序。然后我做了npm install semantic-ui-react --save 来安装包。

我想从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 没有正确呈现？

【问题讨论】：

标签： javascript reactjs components semantic-ui semantic-ui-react

【解决方案1】：

您忘记添加 CSS 文件。

根据文档：

这是开始使用 Semantic UI React 的最快方式。您将无法通过此方法使用自定义主题。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>

有关如何引用它的更多选项，请参阅https://react.semantic-ui.com/usage#css

【讨论】：