React Semantic UIで私のドロップダウンがスタイル付けされていないのはなぜですか？

Question

私はリアクトを学んでおり、私はそれに約1週間です。 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のパッケージをインストールしていないので、それはおそらくです。 Per 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とリアクト主要なパッケージのようなコンポーネント。 CSSパッケージとファイルをインストールしてインポートして、コンポーネントにCSSを適用する必要があります。