React kann CSS einführen: 1. Verwenden Sie „style={{css style}}“ direkt in der Komponente, um CSS einzuführen. 2. Deklarieren Sie zunächst eine Variable in der Renderfunktion, um das Stylesheet zu speichern und an das zu binden style-Attribut und verweisen Sie dann darauf ;3. Verwenden Sie „import ‚css path‘“, um die CSS-Datei einzuführen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, React16-Version. Diese Methode ist für alle Computermarken geeignet.
Empfohlenes Lernen: „Programmiervideo“
Css kann in React eingeführt werden. Wenn Sie den Inline-Stil jedoch direkt auf die folgende Weise schreiben, wird direkt ein Fehler gemeldet, da die JSX-Syntax nicht unterstützt wird.
<div style="color:red">测试数据</div> //报错
React unterstützt die folgenden drei Methoden zum Schreiben von CSS: [Verwandte Tutorial-Empfehlungen: React-Video-Tutorial]
1. Inline-Stil: direkt in der Komponente definiert
...
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...2. Deklarationsstil: im Rendering Funktion Zuerst deklarieren und dann zitieren
Der deklarierte Stil ähnelt dem Inline-Stil. Der einzige Unterschied besteht darin, dass eine Variable zum Speichern des Stylesheets deklariert und an das Stilattribut gebunden wird.
render() {
let mystyle = {
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}
return(
<div style={mystyle}>
测试数据
</div>
);
}3. Verwenden Sie den Import, um externe CSS-Stildateien einzuführen. Eine React-Komponente ist im Allgemeinen ein Ordner, der die entsprechenden JS- und CSS-Dateien enthält.
import './mystyle.css';
Chinesische PHP-Website
! !Das obige ist der detaillierte Inhalt vonKann reagieren, CSS einführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
