Gestaltete Komponenten reagieren: Inline-Stile + 3 andere CSS-Styling-Ansätze (mit Beispielen)

Es gibt keinen richtigen Weg, um Ihre React-Komponenten zu gestalten. Es hängt alles davon ab, wie komplex Ihre Front-End-Anwendung ist und mit welchem ​​Ansatz Sie sich am wohlsten fühlen.

Es gibt vier verschiedene Möglichkeiten, die React-Anwendung zu gestalten. In diesem Beitrag erfahren Sie mehr über alle. Beginnen wir mit dem Inline-Styling.

Inline-Styling

Reaktionskomponenten bestehen aus JSX-Elementen. Nur weil Sie keine regulären HTML-Elemente schreiben, heißt das nicht, dass Sie die alte Inline-Methode nicht verwenden können.

Der einzige Unterschied zu JSX besteht darin, dass Inline-Stile als Objekt anstelle einer Zeichenfolge geschrieben werden müssen.

Hier ist ein einfaches Beispiel:

import React from "react"; export default function App() { return ( 

Hello World

); }

Im obigen Stilattribut teilt der erste Satz geschweifter Klammern Ihrem JSX-Parser mit, dass der Inhalt zwischen den Klammern JavaScript (und keine Zeichenfolge) ist. Der zweite Satz geschweifter Klammern initialisiert ein JavaScript-Objekt.

Stileigenschaftsnamen, die mehr als ein Wort enthalten, werden in camelCase geschrieben, anstatt den traditionellen Stil mit Bindestrich zu verwenden. Beispielsweise muss die übliche text-alignEigenschaft wie textAlignin JSX geschrieben werden:

import React from "react"; export default function App() { return ( 

Hello World

); }

Da das Stilattribut ein Objekt ist, können Sie den Stil auch trennen, indem Sie ihn als Konstante schreiben. Auf diese Weise können Sie es bei Bedarf für andere Elemente wiederverwenden:

import React from "react"; const pStyle = { fontSize: '16px', color: 'blue' } export default function App() { return ( 

The weather is sunny with a small chance of rain today.

); }

Wenn Sie Ihren Absatzstil weiter unten erweitern müssen, können Sie den Objektverteilungsoperator verwenden. Auf diese Weise können Sie Ihrem bereits deklarierten Stilobjekt Inline-Stile hinzufügen:

import React from "react"; const pStyle = { fontSize: "16px", color: "blue" }; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

Inline-Stile sind das grundlegendste Beispiel für ein CSS in der JS-Styling-Technik.

Einer der Vorteile bei der Verwendung des Inline-Stilansatzes besteht darin, dass Sie über eine einfache komponentenorientierte Styling-Technik verfügen. Wenn Sie ein Objekt zum Stylen verwenden, können Sie Ihren Stil erweitern, indem Sie das Objekt verteilen. Wenn Sie möchten, können Sie ihm weitere Stileigenschaften hinzufügen.

In einem großen und komplexen Projekt, in dem Sie Hunderte von React-Komponenten verwalten müssen, ist dies möglicherweise nicht die beste Wahl für Sie.

Sie können keine Pseudoklassen mit Inline-Stilen angeben. Das heißt :hover, :focus,, :activeoder :visitedgehen Sie eher aus dem Fenster als aus der Komponente.

Sie können auch keine Medienabfragen für das reaktionsschnelle Styling angeben. Betrachten wir eine andere Möglichkeit, Ihre React-App zu gestalten.

CSS-Stylesheets

Wenn Sie eine React-Anwendung mit erstellen create-react-app, verwenden Sie automatisch das Webpack, um den Import und die Verarbeitung von Assets zu übernehmen.

Das Tolle an Webpack ist, dass Sie, da es Ihre Assets verwaltet, auch die JavaScript- importSyntax verwenden können, um eine .cssDatei in Ihre JavaScript-Datei zu importieren . Sie können dann den CSS-Klassennamen in JSX-Elementen verwenden, die Sie wie folgt formatieren möchten:

.paragraph-text { font-size: 16px; color: 'blue'; }
import React, { Component } from 'react'; import './style.css'; export default function App() { return (  

The weather is sunny with a small chance of rain today.

); }

Auf diese Weise wird das CSS von Ihren JavaScript-Dateien getrennt, und Sie können die CSS-Syntax wie gewohnt schreiben.

Mit diesem Ansatz können Sie sogar ein CSS-Framework wie Bootstrap in Ihre React-App aufnehmen. Sie müssen lediglich die CSS-Datei in Ihre Stammkomponente importieren.

Mit dieser Methode können Sie alle CSS-Funktionen verwenden, einschließlich Pseudoklassen und Medienabfragen. Der Nachteil der Verwendung eines Stylesheets besteht jedoch darin, dass Ihr Stil nicht in Ihrer Komponente lokalisiert wird.

Alle CSS-Selektoren haben den gleichen globalen Bereich. Dies bedeutet, dass ein Selektor unerwünschte Nebenwirkungen haben und andere visuelle Elemente Ihrer App beschädigen kann.

Genau wie bei Inline-Stilen besteht bei der Verwendung von Stylesheets immer noch das Problem, CSS in einem großen Projekt zu verwalten und zu aktualisieren.

CSS-Module

Ein CSS-Modul ist eine reguläre CSS-Datei, deren Klassen- und Animationsnamen standardmäßig lokal festgelegt sind.

Jede React-Komponente verfügt über eine eigene CSS-Datei, und Sie müssen die erforderlichen CSS-Dateien in Ihre Komponente importieren.

Um React darüber zu informieren, dass Sie CSS-Module verwenden, benennen Sie Ihre CSS-Datei gemäß der [name].module.cssKonvention.

Hier ist ein Beispiel:

.BlueParagraph { color: blue; text-align: left; } .GreenParagraph { color: green; text-align: right; }
import React from "react"; import styles from "./App.module.css"; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

Wenn Sie Ihre App erstellen, sucht Webpack automatisch nach CSS-Dateien mit dem .module.cssNamen. Webpack nimmt diese Klassennamen und ordnet sie einem neuen, generierten lokalisierten Namen zu.

Here is the sandbox for the above example. If you inspect the blue paragraph, you’ll see that the element class is transformed into _src_App_module__BlueParagraph.

CSS Modules ensures that your CSS syntax is scoped locally.

Another advantage of using CSS Modules is that you can compose a new class by inheriting from other classes that you’ve written. This way, you’ll be able to reuse CSS code that you’ve written previously, like this:

.MediumParagraph { font-size: 20px; } .BlueParagraph { composes: MediumParagraph; color: blue; text-align: left; } .GreenParagraph { composes: MediumParagraph; color: green; text-align: right; }

Finally, in order to write normal style with a global scope, you can use the :global selector in front of your class name:

:global .HeaderParagraph { font-size: 30px; text-transform: uppercase; }

You can then reference the global scoped style like a normal class in your JS file:

Weather Forecast

Styled Components

Styled Components is a library designed for React and React Native. It combines both the CSS in JS and the CSS Modules methods for styling your components.

Let me show you an example:

import React from "react"; import styled from "styled-components"; // Create a Title component that'll render an 

tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; export default function App() { return Hello World!; }

When you write your style, you’re actually creating a React component with your style attached to it. The funny looking syntax of styled.h1 followed by backtick is made possible by utilizing JavaScript’s tagged template literals.

Styled Components were created to tackle the following problems:

  • Automatic critical CSS: Styled-components keep track of which components are rendered on a page, and injects their styles and nothing else automatically. Combined with code splitting, this means your users load the least amount of code necessary.
  • No class name bugs: Styled-components generate unique class names for your styles. You never have to worry about duplication, overlap, or misspellings.
  • Easier deletion of CSS: It can be hard to know whether a class name is already used somewhere in your codebase. Styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all of its styles get deleted with it.
  • Simple dynamic styling: Adapting the styling of a component based on its props or a global theme is simple and intuitive, without you having to manually manage dozens of classes.
  • Painless maintenance: You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
  • Automatic vendor prefixing: Write your CSS to the current standard and let styled-components handle the rest.

You get all of these benefits while still writing the same CSS you know and love – just bound to individual components.

If you’d like to learn more about styled components, you can visit the documentation and see more examples.

Conclusion

Many developers still debate the best way to style a React application. There are both benefits and drawbacks in writing CSS in a non-traditional way.

For a long time, separating your CSS file and HTML file was regarded as the best practice, even though it caused a lot of problems.

But today, you have the choice of writing component-focused CSS. This way, your styling will take advantage of React’s modularity and reusability. You are now able to write more enduring and scalable CSS.