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

时间:2017-07-02 04:12:21

标签: javascript reactjs semantic-ui-react

我正在学习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

1 个答案:

答案 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应用到组件中。