爲什麼我的下拉式樣在React語義UI中沒有？

我正在學習React，我大約一個星期的時間。我想創建一個下拉菜單並學習React語義UI，我想我可以從他們的網站here複製代碼開始。即使在儘可能直接複製代碼的情況下，我也無法使它看起來正確。有人可以解釋是什麼讓我看起來不對嗎？爲什麼我的下拉式樣在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

來源

2017-07-02 Travis Jon Schnider

這是我的代碼產生的：http://i.imgur.com/0d6lHn3.png。這是示例代碼生成的內容：http://i.imgur.com/6n8vJIV.png。 –

Hi @ TravisJonSchnider Hi，只想確認在下拉列表中選擇某個項目時頭像是否仍然顯示。當展開選區時，我可以看到化身，但是當我點擊其中一個選項時，選定的只是顯示純文本 –

這可能是因爲你沒有安裝相應的CSS包。每個the Usage page of the documentation：

語義UI CSS可以作爲一個包安裝在您的項目使用NPM。您將無法使用此方法使用自定義主題。
$ npm install semantic-ui-css --save 
安裝後，你需要包括精縮CSS文件在你index.js文件：
import 'semantic-ui-css/semantic.min.css'; 

的CSS住在一個單獨的包中，JavaScript和作出反應組件就像在主包中一樣。您必須安裝並導入CSS包和文件，才能將CSS應用於組件。

來源

2017-07-02 04:22:19 Li357

謝謝Andrew Li！這解決了它。我一直堅持這幾個小時，我感謝幫助。 –

爲什麼我的下拉式樣在React語義UI中沒有？

回答

相關問題