Was sind gestaltete Komponenten?

Styled Components ist eine beliebte Bibliothek für React, die es Entwicklern ermöglicht, CSS direkt in ihren JavaScript-Code zu schreiben. Diese Bibliothek nutzt getaggte Vorlagenliterale, um Ihre Komponenten zu formatieren. Es fördert die Verwendung von Stilen auf Komponentenebene und hilft dabei, die Belange von Stil und Elementstruktur getrennt zu halten und den gesamten Code wartbarer zu machen.

Vorteile der Verwendung gestalteter Komponenten

1. Dynamisches Styling: Styled Components ermöglicht Ihnen die Verwendung von JavaScript, um Stile basierend auf Requisiten, Status oder anderen Variablen dynamisch festzulegen.

2. Bessere Organisation: Wenn Sie Stile nahe an den Komponenten halten, auf die sie sich auswirken, wird Ihr Code modularer und einfacher zu verwalten.

3. Keine Klassennamenfehler: Da Stile auf Komponenten beschränkt sind, müssen Sie sich keine Gedanken über Klassennamenkollisionen oder die Spezifitätsprobleme machen, die bei herkömmlichem CSS häufig auftreten.

4. Theming-Unterstützung: Styled Components bietet integrierte Unterstützung für Theming, sodass Sie ganz einfach konsistente Stile in Ihrer Anwendung anwenden können.

Installieren von gestalteten Komponenten

Um Styled Components verwenden zu können, müssen Sie es über npm oder Yarn installieren:

npm install styled-components

or

yarn add styled-components

Grundlegende Verwendung

Hier ist ein einfaches Beispiel, um zu veranschaulichen, wie Styled Components funktioniert:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return  Login ;
}

Anpassung basierend auf Requisiten

Gestaltete Komponenten sind funktional, sodass wir Elemente problemlos dynamisch gestalten können.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    

      Button A
      Button B
    
  )
}

Thematisierung

Styled Components unterstützt auch die Themengestaltung, sodass Sie eine Reihe von Stilen (wie Farben, Schriftarten usw.) definieren und diese konsistent in Ihrer Anwendung anwenden können.

Zuerst definieren Sie Ihr Thema:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

Dann verpacken Sie Ihre Anwendung mit dem ThemeProvider und übergeben Sie Ihr Thema:

const App = () => (
  
    

      Primary Button
      Default Button
    
  
);

Zuletzt greifen Sie auf die Designeigenschaften in Ihren gestalteten Komponenten zu:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

Abschluss

Styled Components ist ein leistungsstarkes Tool für React-Entwickler, die die Wartbarkeit und Skalierbarkeit ihrer Anwendungen verbessern möchten. Durch die Kapselung von Stilen in Komponenten und die Nutzung der vollen Leistungsfähigkeit von JavaScript bietet Styled Components einen modernen und effizienten Ansatz für die Gestaltung von Webanwendungen. Egal, ob Sie an einem kleinen Projekt oder einer großen Anwendung arbeiten, Styled Components kann Ihnen dabei helfen, Ihre Stile organisiert und Ihren Code sauber zu halten.