为什么在使用“semantic-ui-react”的“网格”组件时布局不正确？答案

【问题标题】：Why am I getting incorrect layout when using the "Grid" component of 'semantic-ui-react'?为什么在使用“semantic-ui-react”的“网格”组件时布局不正确？
【发布时间】：2018-10-01 16:51:48
【问题描述】：

我的项目中有以下层次结构

project
- node_modules
- public
- src
  - components
    - CustomGrid.js
  - App.js

以及任何 React 项目中的其他标准文件：package.json、README、package-lock.json、.gitignore。

CustomGrid.js 包含以下代码

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

class CustomGrid extends React.Component {
  render() {
    return (
      <Grid columns={2}>
        <Grid.Column>
          <p>Hello World</p>
        </Grid.Column>
        <Grid.Column>
          <p>Hello World</p>
        </Grid.Column>
      </Grid>
    );
  }
}

export default CustomGrid;

App.js 包含以下代码

import React, { Component } from 'react';
import CustomGrid from './components/CustomGrid';

class App extends Component {
  render() {
    return (
      <CustomGrid />
    );
  }
}

export default App;

我得到的输出如下

但是，根据我的代码和规范here，两个“Hello World”语句应该是并排的。我做错了什么？

【问题讨论】：

标签： javascript reactjs web web-applications

【解决方案1】：

您似乎缺少语义 ui css？见https://react.semantic-ui.com/usage#css

【讨论】：

谢谢。是的，我错过了 CSS 文件。

【解决方案2】：

需要安装语义css模块
npm i semantic-ui-css
然后将其导入您的 index.js
import "semantic-ui-css/semantic.min.css";

您可以在此代码框查看结果：SemanticGridTest

注意：这样可以导入整个 Semantic-css-library。
可以用于开发，但不能用于生产。

【讨论】：