React mit CSS-Stilen verwenden

Es gibt mehrere Möglichkeiten, CSS in React-Anwendungen zu verwenden.

Im Folgenden werden einige gängige Methoden und detaillierte Anweisungen zu ihrer Umsetzung in React beschrieben.

Inline-Stile

In React wird die direkte Verwendung von CSS-Stilen auf Elementen durch Inline-Stile erreicht.

Inline-Stile übergeben CSS-Stile direkt als Objekt an das style-Attribut des Elements. Jede Stileigenschaft wird in camelCase anstelle des traditionellen CSS-Eigenschaftsnamens geschrieben.

Direkt innerhalb des Elements verwenden:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hallo Stil!</h1>
      <p>Ein wenig Stil hinzufügen!</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Du kannst auch ein Objekt mit Stilinformationen erstellen und es im style-Attribut referenzieren:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  // Inline-Stilobjekt definieren
  const containerStyle = {
    padding: '20px',
    backgroundColor: '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hallo, Welt!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Im obigen Beispiel sind containerStyle und titleStyle zwei Inline-Style-Objekte, die jeweils auf die div- und h1-Elemente angewendet werden. Hier sind die wichtigsten Punkte:

  • Verwende camelCase für CSS-Eigenschaften (z. B.backgroundColoranstelle vonbackground-color）。
  • Alle Style-Eigenschaftswerte werden als Strings übergeben (außer numerische Werte, die direkt verwendet werden können und React fügt automatisch Einheiten hinzu).

Inline-Styles können sich auch dynamisch basierend auf dem Zustand der Komponente ändern:

Beispiel

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const containerStyle = {
    padding: '20px',
    backgroundColor: isHighlighted ? '#ffff99' : '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hallo, Welt!</h1>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Hervorhebung umschalten
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Verwenden von Style-Dateien

Du kannst CSS-Styles in einer separaten Datei schreiben; verwende einfach die.css-Dateierweiterung, um die Datei zu speichern, und importiere sie dann in deine Anwendung.

Erstelle eine Style-Datei namens App.css und füge den folgenden CSS-Code hinzu:

Beispiel

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Importiere in deiner Anwendung das Stylesheet App.css:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Hallo Style!</h1>
      <p>Ein wenig Stil hinzufügen!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

CSS-Module

Eine andere Möglichkeit, Stile zu einer Anwendung hinzuzufügen, ist die Verwendung von CSS-Modulen.

CSS-Module sind eine Namenskonvention für lokal begrenzte CSS-Dateien. Bei diesem Ansatz sind CSS-Klassennamen und Animationsnamen standardmäßig lokal begrenzt.

CSS-Module sind sehr praktisch für Komponenten, die in separaten Dateien abgelegt sind.

Verwende die.module.css-Dateiendung, um CSS-Module zu erstellen, zum Beispiel: MyComponent.module.css.

Beispiel

/* MyComponent.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

Importiere das Stylesheet in die Anwendung:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hallo, Welt!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);
Andere Erweiterungen