为什么我的下拉列表不是在 React 语义 UI 中设置样式的？

Question

我正在学习 React，大约一周了。我想构建一个下拉列表并学习 React 语义 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 包。根据文档的"使用情况"页面：

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

$ npm install semantic-ui-css --save

安装后，您需要在索引.js文件中包含缩小的 CSS 文件：

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

CSS 存在于一个单独的包中，JavaScript 和 React 组件就像在主包中一样。您必须安装并导入 CSS 包和文件才能让它将 CSS 应用于您的组件。