javascript - 为什么我的下拉菜单没有在 React Semantic UI 中设置样式？

Question

我正在学习 React，我已经学习了大约一周。我想构建一个下拉菜单并学习 React Semantic UI 我想我可以从他们网站上复制代码开始 here .即使尽可能直接复制代码，我也无法让它看起来正确。谁能解释一下让我看起来不对劲的区别是什么？

我的代码:

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包。每the Usage page of the documentation :

Semantic UI CSS can be installed as a package in your project using NPM. You won't be able to use custom themes with this method.

$ npm install semantic-ui-css --save

After install, you'll need to include the minified CSS file in your index.js file:

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

CSS 位于单独的包中，JavaScript 和 React 组件位于主包中。您必须安装并导入 CSS 包和文件，才能将 CSS 应用到您的组件。