2017-08-07 3 views
1

semantic-ui-reactは私のブラウザでは動作しません。理由はわかりません。コンソールにエラーや問題はありません。Semantic-ui-reactライブラリが機能しません。エラーが発生していない

これはライブラリのコンポーネントsemantic-uiです。

import React, { Component , PropTypes} from 'react'; 
import { Button } from 'semantic-ui-react'; 
import logo from './logo.svg'; 
import './App.css'; 
import HeaderExampleUsersIcon from './UptimeGuarantee' 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
       <div className="App-header"> 
        <img src={logo} className="App-logo" alt="logo" /> 
        <h2>Welcome to React</h2> 
       </div> 
       <p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p> 
       <Button primary>Primary</Button> 
       <HeaderExampleUsersIcon /> 
     </div> 
    ); 
    } 
} 

export default App; 

結果:

enter image description here

+0

重複、https://stackoverflow.com/questions/44609711/semantic-ui-をHTMLにスタイルを追加しますからスタイルをインポートする必要がありますイメージプロパティー - 機能しない - 意味 - 反応 -/ –

答えて

2

セマンティック-UI-反応はなしコンポーネントのみで、それは私がこのコンポーネントを呼び出し、このファイルUptimeGuarantee.js

import React from 'react' 
import { Header, Icon , Image} from 'semantic-ui-react' 

const HeaderExampleUsersIcon =() => (
    <div> 
    <Header as='h2' icon textAlign='center'> 
     <Icon name='users' circular /> 
     <Header.Content> 
     Friends 
     </Header.Content> 
    </Header> 
    <Image centered size='large' src='/assets/images/wireframe/centered-paragraph.png' /> 
    </div> 
) 

export default HeaderExampleUsersIcon 

と私のApp.js上からですスタイルとフォント。

あなたはセマンティック-UI-CSS

import 'semantic-ui-css/semantic.min.css'; 

または

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"></link> 
+0

私はそれを試して、それは問題を解決した – MahmoudMH

関連する問題