2017-11-24 4 views
1

Ich versuche, eine App mit Muicss zum Stylen meiner Komponenten in einer React js-App einzurichten.Laden von Muicss-Stilen in React js

Unten ist der Code eines sehr einfachen Beispiels, aber wenn ich zu meinem Browser gehe, hat der Knopf keinen Stil darin, und ich weiß nicht, wenn ich etwas vermisse, ich verwendete Material Design vorher, und ich hatte nein Probleme.

import React from 'react'; 
import Button from 'muicss/lib/react/button'; 

export default class Example extends React.Component { 
    render() { 
    return (
     <div> 
      <Button variant="raised" color="danger">button</Button> 
     </div> 
    ); 
    } 
} 

Kann mir jemand helfen zu bekommen, wenn ich etwas fehle, installierte ich die Bibliothek NPM verwenden und in meinem node_modules Ordner kann ich alle Dateien aus der Muicss Bibliothek sehen.

In der Konsole gibt es keinen Fehler oder etwas seltsam, ist die seltsame Sache, dass die Komponenten keine Stile haben ...

enter image description here

enter image description here

Antwort

0

MUI zu verwenden Reagieren Sie müssen das MUI enthalten CSS-Datei in Ihrer HTML-Nutzlast.

<link href="//cdn.muicss.com/mui-0.9.30/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" /> 

(Quelle: MUICSS documentation) Es kann in Ihre App CSS oder hinzugefügt aus dem CDN kompiliert werden

+0

Vielen Dank für Ihre Zeit, ich habe noch eine Frage ... ich bin nicht mit HTML-Dateien , alle ara js, sogar meine "home" -Seite ist eine js-Datei, also wie kann ich die CSS hinzufügen? Im Falle der CDN, was passiert, wenn mein Netzwerk es mir nicht erlaubt, zu einer externen Quelle zu gehen, muss ich das CSS lokal herunterladen oder laden, oder? – kennechu

+0

Sie können eine Webseite in einem Browser ohne eine HTML-Datei nicht anzeigen, selbst wenn sie nur ein einzelnes div enthält, in dem Sie das React-Layout rendern. –

+0

Und ja, laden Sie einfach die Datei herunter und servieren Sie sie von Ihrem eigenen Server –