为什么我的下拉菜单没有采用 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 应用到您的组件。

为什么我的下拉菜单没有采用 React Semantic UI 样式？

Why isn't my Dropdown styled in React Semantic UI?

javascript

reactjs

semantic-ui-react