2017-06-17 17 views
1

Ich versuche das offizielle semantic-ui-react zum ersten Mal mit React zu verwenden. Ive baute eine brandneue Anwendung reagieren:Semantic-UI Bildeigenschaften arbeiten nicht mit semantic-ui-react

$ create-react-app test 

Und ich habe dann versucht, das gleiche Bild reagieren wie folgt hinzufügen in App.js:

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import { Image } from 'semantic-ui-react'; 

import './App.css'; 


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> 

     <div className="ui container"> 
      <h1>Hello World</h1> 
      <Image src={logo} avatar/> 
      <Image src={logo} size='mini'/> 
     </div> 

     </div> 
    ); 
    } 
} 

export default App; 

Das Ergebnis zeigt mir 2 große reagieren {logo} Bilder, nicht mini oder avatar gestylt:

enter image description here

Idee von dem, was ich bin hier fehlt ?

+0

Ich habe versucht, Ihren Beispielcode zu re-implementieren, aber ich bekomme den gleichen Render wie Sie. Ich bin so fest wie du bist, aber schaue hinein. –

Antwort

1

Semantic UI React erfordert eine Semantic UI 'CSS, Sie haben vergessen, es einzurichten, here ist Anweisungen. Wir werden bald auch ein Beispielsetup mit CRA hinzufügen.

+0

Hinzufügen der CSS gelöst. Vielen Dank. – Mendes

Verwandte Themen