Reagieren Sie semantische UI-Komponente nicht ordnungsgemäß Rendern

Question

Ich verwendete create-react-app, um meine App zu initialisieren. Dann habe ich npm install semantic-ui-react --save, um das Paket zu installieren.

Ich möchte dieses Grid Beispiel von https://react.semantic-ui.com/collections/grid#grid-example-divided-number erstellen:

ich eine Datei erstellt Grid.js genannt:

import React from 'react' 
import { Grid } from 'semantic-ui-react' 

const GridExample =() => (
    <Grid columns={3} divided> 
    <Grid.Row> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
    </Grid.Row> 

    <Grid.Row> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
     <Grid.Column> 
     <p>Lorem Ipsum</p> 
     </Grid.Column> 
    </Grid.Row> 
    </Grid> 
) 

export default GridExample 

Dann in App.js ich GridExample importiert:

import React, { Component } from 'react'; 
import GridExample from './Grid' 
import logo from './logo.svg'; 
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> 

     <GridExample /> 

     </div> 
    ); 
    } 
} 
export default App; 

Wenn jedoch die Web-Seite lädt die <p> Elemente übereinander gestapelt werden - als ob 6X1 statt der beabsichtigten 2X3

Warum ist die Grid nicht richtig wiedergegeben werden?

Answer 1

Sie vergessen, die CSS-Datei hinzuzufügen.

Nach der Dokumentation:

Dies ist der schnellste Weg, um mit Semantic UI zu beginnen React. Sie können mit dieser Methode keine benutzerdefinierten Designs verwenden.

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

Siehe https://react.semantic-ui.com/usage#css für mehr Optionen, wie es