为什么我的Dropdown不能在React Semantic UI中设置样式？

Question

我正在学习React，大约要花一个星期的时间。我想构建一个下拉列表并学习React Semantic UI，我认为我可以从此处复制其网站的代码开始。即使尽可能直接复制代码，我也无法正确显示。有人可以解释一下让我看起来错误的区别是什么吗？

我的代码：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

var options = [
    {
      text: 'Jenny Hess',
      value: 'Jenny Hess',
    },
    {
      text: 'ME',
          value: 'ME',
    }
]

const Reorder = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={options} />
)

export default Reorder

文档中的代码示例：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

import { friendOptions } from '../common'
  // friendOptions = [
  //   {
  //     text: 'Jenny Hess',
  //     value: 'Jenny Hess',
  //     image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
  //   },
//  ...
// ]


const DropdownExampleSelection = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} />
)

export default DropdownExampleSelection

Answer 1

可能是因为您没有安装相应的CSS软件包。根据文档的“用法”页面：

可以使用NPM将语义UI CSS作为软件包安装在项目中。您将无法通过此方法使用自定义主题。

$ npm install semantic-ui-css --save

安装后，您需要将缩小的CSS文件包括在index.js文件中：

import 'semantic-ui-css/semantic.min.css';

CSS位于单独的程序包中，而JavaScript和React组件与主程序包一样。您必须安装并导入CSS软件包和文件，以使其将CSS应用于您的组件。