Reagieren mit CSS gestalten
Es gibt viele Möglichkeiten, React mit CSS zu stylen. In diesem Tutorial werden drei gängige Methoden näher betrachtet:
- Inline-Styling
- CSS-Stylesheets
- CSS-Module
Inline-Styling
Um ein Element mit dem Inline-Stilattribut zu gestalten, muss der Wert ein JavaScript-Objekt sein:
Beispiel:
Fügen Sie ein Objekt mit den Stilinformationen ein:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Hinweis: In JSX werden JavaScript-Ausdrücke in geschweifte Klammern geschrieben, und da JavaScript-Objekte ebenfalls geschweifte Klammern verwenden, wird der Stil im obigen Beispiel in zwei Sätze von geschweiften Klammern geschrieben {{}}.
camelCased-Eigenschaftsnamen
Da das Inline-CSS in ein JavaScript-Objekt geschrieben wird, müssen Eigenschaften mit Bindestrich-Trennzeichen wie background-color, mit Camel-Case-Syntax geschrieben werden:
Beispiel:
Verwenden Sie backgroundColorstatt
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript-Objekt
Sie können auch ein Objekt mit Stilinformationen erstellen und im Stilattribut darauf verweisen:
Beispiel:
Erstellen Sie ein Stilobjekt mit dem Namen myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Zertifiziert werden!
$ 95 REGISTRIEREN
CSS-Stylesheet
Sie können Ihr CSS-Design in eine separate Datei schreiben, speichern Sie einfach die Datei mit der
.cssDateierweiterung und importieren Sie sie in Ihre Anwendung.
App.css:
Erstellen Sie eine neue Datei namens "App.css" und fügen Sie CSS-Code darin ein:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Hinweis: Sie können die Datei beliebig nennen, merken Sie sich nur die richtige Dateierweiterung.
Importieren Sie das Stylesheet in Ihre Anwendung:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
CSS-Module
Eine andere Möglichkeit, Stile zu Ihrer Anwendung hinzuzufügen, ist die Verwendung von CSS-Modulen.
CSS-Module sind praktisch für Komponenten, die in separaten Dateien platziert sind.
Das CSS in einem Modul ist nur für die Komponente verfügbar, die es importiert hat, und Sie müssen sich keine Gedanken über Namenskonflikte machen.
Erstellen Sie das CSS-Modul mit der .module.css
Erweiterung, Beispiel: my-style.module.css.
Erstellen Sie eine neue Datei mit dem Namen "my-style.module.css" und fügen Sie CSS-Code darin ein:
mein-stil.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Importieren Sie das Stylesheet in Ihre Komponente:
Auto.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Importieren Sie die Komponente in Ihre Anwendung:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));