React Styled Components: Inline Styles + 3 Other CSS Styling Approaches (med eksempler)

Der er ingen rigtig måde at style dine React-komponenter på. Det hele afhænger af, hvor kompleks din front-end-applikation er, og hvilken tilgang du er mest komfortabel med.

Der er fire forskellige måder at style React-applikationen på, og i dette indlæg lærer du om dem alle. Lad os starte med inline styling.

Inline Styling

Reager komponenter er sammensat af JSX-elementer. Men bare fordi du ikke skriver almindelige HTML-elementer, betyder det ikke, at du ikke kan bruge den gamle inline-stilmetode.

Den eneste forskel med JSX er, at indbyggede stilarter skal skrives som et objekt i stedet for en streng.

Her er et simpelt eksempel:

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

Hello World

); }

I ovenstående stilattribut fortæller det første sæt krøllede parenteser din JSX-parser, at indholdet mellem parenteserne er JavaScript (og ikke en streng). Det andet sæt krøllede parenteser initialiserer et JavaScript-objekt.

Stilegenskabsnavne, der har mere end et ord, skrives i camelCase i stedet for at bruge den traditionelle bindestreg. For eksempel skal den sædvanlige text-alignegenskab skrives som textAligni JSX:

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

Hello World

); }

Da stilattributten er et objekt, kan du også adskille stilen ved at skrive den som en konstant. På denne måde kan du genbruge det på andre elementer efter behov:

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.

); }

Hvis du har brug for at udvide din afsnitstype længere nede på linjen, kan du bruge objektudbredelsesoperatoren. Dette giver dig mulighed for at tilføje indbyggede stilarter til dit allerede erklærede stilobjekt:

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-stilarter er det mest basale eksempel på en CSS i JS-stylingsteknik.

En af fordelene ved at bruge den indbyggede stiltilgang er, at du har en simpel komponentfokuseret stylingsteknik. Ved at bruge et objekt til styling kan du udvide din stil ved at sprede objektet. Derefter kan du tilføje flere stilegenskaber til det, hvis du vil.

Men i et stort og komplekst projekt, hvor du har hundreder af React-komponenter til at styre, er dette muligvis ikke det bedste valg for dig.

Du kan ikke angive pseudoklasser ved hjælp af indbyggede typografier. Det betyder :hover, :focus, :active, eller :visitedgå ud af vinduet i stedet for komponenten.

Du kan heller ikke angive medieforespørgsler til responsiv styling. Lad os overveje en anden måde at style din React-app på.

CSS-typografiark

Når du opbygger en React-applikation ved hjælp af create-react-app, bruger du automatisk webpack til at håndtere aktivimport og -behandling.

Den gode ting ved webpack er, at da den håndterer dine aktiver, kan du også bruge JavaScript- importsyntaksen til at importere en .cssfil til din JavaScript-fil. Du kan derefter bruge CSS-klassens navn i JSX-elementer, som du vil style, sådan:

.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.

); }

På denne måde adskilles CSS fra dine JavaScript-filer, og du kan bare skrive CSS-syntaks som normalt.

Du kan endda medtage en CSS-ramme som f.eks. Bootstrap i din React-app ved hjælp af denne tilgang. Alt du skal bruge er at importere CSS-filen til din rodkomponent.

Denne metode giver dig mulighed for at bruge alle CSS-funktionerne, inklusive pseudoklasser og medieforespørgsler. Men ulempen ved at bruge et typografiark er, at din stil ikke bliver lokaliseret til din komponent.

Alle CSS-vælgere har samme globale omfang. Dette betyder, at en vælger kan have uønskede bivirkninger og bryde andre visuelle elementer i din app.

Ligesom indbyggede stilarter giver dig stadig brug af stilark med problemet med at vedligeholde og opdatere CSS i et stort projekt.

CSS-moduler

Et CSS-modul er en almindelig CSS-fil med alle dets klasse- og animationsnavne, der er scoped lokalt som standard.

Hver React-komponent har sin egen CSS-fil, og du skal importere de nødvendige CSS-filer til din komponent.

For at fortælle React, at du bruger CSS-moduler, skal du navngive din CSS-fil ved hjælp af [name].module.csskonventionen.

Her er et eksempel:

.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!

); }

Når du bygger din app, ser webpack automatisk efter CSS-filer, der har .module.cssnavnet. Webpack tager disse klassenavne og kortlægger dem til et nyt, genereret lokaliseret navn.

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.