我正在学习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
答案 0 :(得分:2)
可能是因为您没有安装相应的CSS包。每the Usage page of the documentation:
语义UI CSS可以使用NPM作为包安装在项目中。您无法使用此方法使用自定义主题。
$ npm install semantic-ui-css --save
安装完成后,您需要在 index.js 文件中包含缩小的CSS文件:
import 'semantic-ui-css/semantic.min.css';
CSS位于一个单独的包中,JavaScript和React组件就像在主包中一样。您必须安装并导入CSS包和文件,才能将CSS应用到组件中。