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：

语义UI CSS可以使用NPM作为包安装在项目中。您无法使用此方法使用自定义主题。
$ npm install semantic-ui-css --save
安装完成后，您需要在 index.js 文件中包含缩小的CSS文件：
import 'semantic-ui-css/semantic.min.css';

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

为什么我的Dropdown不是在React Semantic UI中设计的？

1 个答案: