javascript - 为什么在使用 "Grid"的 'semantic-ui-react' 组件时得到不正确的布局？

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;

我得到的输出如下

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

Answer 1

看起来您缺少语义 ui css？请参阅https://react.semantic-ui.com/usage#css