為什么使用“ semantic-ui-react”的“ Grid”組件時布局不正確？

Question

我的項目中具有以下層次結構

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;

我得到的輸出如下

但是，根據我的代碼和此處的規范，兩個“ Hello World”語句應並排放置。 我究竟做錯了什么？

Answer 1

看來您缺少語義ui CSS？ 參見https://react.semantic-ui.com/usage#css

Answer 2

您需要安裝語義CSS模塊
npm i semantic-ui-css
然后將其導入到您的index.js
import "semantic-ui-css/semantic.min.css";

您可以在以下代碼和框中查看結果： SemanticGridTest

注意：這樣，您可以導入整個Semantic-css-library。
可以開發，但不能用於生產。