In diesem Tutorial erfahren Sie, wie Sie gestaltete Komponenten in einer React-Anwendung verwenden, um modulare, wiederverwendbare und dynamische Stile zu erstellen. Wir beginnen mit den Grundlagen der Installation und Verwendung des styled-componentsPakets und fahren dann mit der Erstellung benutzerdefinierter Komponenten mit dynamischen Stilen fort.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Folgendes auf Ihrem System installiert ist:

• Node.js und npm (oder Garn)
• Ein Code-Editor (z. B. VS Code, Sublime Text)

Zuerst installieren wir das styled-componentsPaket, indem wir den folgenden Befehl in Ihrem Terminal ausführen:

npm install styled-components

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #008CBA;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <StyledButton>Click me</StyledButton>
    </div>
  );
}

export default App;

Dynamische Stile mit Requisiten erstellen

Einer der Vorteile der Verwendung styled-componentsist die Möglichkeit, dynamische Stile basierend auf Requisiten zu erstellen. Lassen Sie uns unsere StyledButtonKomponente so ändern, dass sie basierend auf einer Requisite unterschiedliche Hintergrundfarben hat primary.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : '#E6E6E6'};
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

<StyledButton>Default button</StyledButton>
<StyledButton primary>Primary button</StyledButton>

Ein weiterer Vorteil der Verwendung styled-componentsist die Möglichkeit, wiederverwendbare gestaltete Komponenten zu erstellen. Lassen Sie uns eine benutzerdefinierte gestaltete CardKomponente erstellen, die wir in unserer gesamten Anwendung wiederverwenden können.

const Card = styled.div`
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-radius: 3px;
`;

<Card>
  <h2>Card title</h2>
  <p>Card content</p>
</Card>

styled-componentsbieten eine leistungsstarke und flexible Möglichkeit, Ihre React-Komponenten zu gestalten. Sie bieten mehrere Vorteile, darunter Modularität, bereichsbezogene Stile, dynamische Stile und verbesserte Lesbarkeit. In diesem Tutorial haben wir die Grundlagen der Verwendung von styled-components, der Erstellung dynamischer Stile mit Requisiten und der Erstellung wiederverwendbarer gestalteter Komponenten untersucht. Mit diesem Wissen können Sie mit der Verwendung styled-componentsin Ihren eigenen React-Anwendungen beginnen und deren Vorteile nutzen.