We kennen allemaal de standaardmanier van een stylesheet koppelen aan de <head> van een HTML-document, toch? Dat is slechts een van de vele manieren waarop we CSS kunnen schrijven. Maar hoe ziet het eruit om dingen te stylen in een single-page applicatie (SPA), bijvoorbeeld in een React-project?
Blijkt dat er verschillende manieren zijn om een React-toepassing te stylen. Sommige overlappen met traditionele styling, andere niet zozeer. Maar laten we alle manieren tellen waarop we het kunnen doen.
Externe stylesheets importeren
Zoals de naam al doet vermoeden, kan React CSS-bestanden importeren. Het proces is vergelijkbaar met hoe we het CSS-bestand in de HTML koppelen <head>:
- Maak een nieuw CSS-bestand in uw projectmap.
- Schrijf CSS.
- Importeer het in het React-bestand.
Soortgelijk:
import "./style.css";Dat staat meestal bovenaan het bestand waar andere importen plaatsvinden:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;In dit voorbeeld wordt een CSS-bestand geïmporteerd in een App.js van het /Components/css map.
Inline stijlen schrijven
Je bent misschien gewend te horen dat inline-styling niet zo geweldig is voor onderhoudbaarheid en zo, maar er zijn zeker situaties (hier is er een!) waar het zinvol is. En onderhoudbaarheid is minder een probleem in React, omdat de CSS toch vaak al in hetzelfde bestand zit.
Dit is een supereenvoudig voorbeeld van inline-styling in React:
<div className="main" style={{color:"red"}}>Een betere benadering is echter om objecten te gebruiken:
- Maak eerst een object dat stijlen voor verschillende elementen bevat.
- Voeg het dan toe aan een element met behulp van de
styleattribuut en selecteer vervolgens de eigenschap die u wilt opmaken.
Laten we dat in context bekijken:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Dit voorbeeld bevat een styles object dat nog twee objecten bevat, één voor de .main class en de andere voor tekstinvoer, die stijlregels bevatten die vergelijkbaar zijn met wat we zouden verwachten in een externe stylesheet. Die objecten worden vervolgens toegepast op de style attribuut van elementen die zich in de geretourneerde markup bevinden.
Merk op dat accolades worden gebruikt bij het verwijzen naar stijlen in plaats van de aanhalingstekens die we normaal zouden gebruiken in gewone HTML.
CSS-modules gebruiken
CSS-modules... wat is er in godsnaam mee gebeurd, toch? Ze hebben het voordeel van variabelen met een lokaal bereik en kunnen direct naast React worden gebruikt. Maar wat zijn ze, alweer, precies?
Citeren van de repo's documentatie:
CSS Modules werkt door individuele CSS-bestanden te compileren in zowel CSS als gegevens. De CSS-uitvoer is normale, globale CSS, die rechtstreeks in de browser kan worden geïnjecteerd of kan worden samengevoegd en naar een bestand kan worden geschreven voor productiegebruik. De gegevens worden gebruikt om de voor mensen leesbare namen die u in de bestanden hebt gebruikt, toe te wijzen aan de wereldwijd veilige uitvoer-CSS.
In eenvoudiger bewoordingen stellen CSS-modules ons in staat om dezelfde klassenaam in meerdere bestanden te gebruiken zonder botsingen, aangezien elke klassenaam een unieke programmatische naam krijgt. Dit is vooral handig bij grotere toepassingen. Elke klassenaam is lokaal gericht op het specifieke onderdeel waarin het wordt geïmporteerd.
Een stylesheet van een CSS-module is vergelijkbaar met een gewone stylesheet, alleen met een andere extensie (bijv styles.module.css). Hier is hoe ze zijn ingesteld:
- Maak een bestand met
.module.cssals de extensie. - Importeer die module in de React-app (zoals we eerder zagen)
- Voeg een
classNamenaar een element of component en verwijzen naar de specifieke stijl uit de geïmporteerde stijlen.
Super simpel voorbeeld:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Gebruik gestileerde componenten
Heb je gebruikt gestileerde componenten? Het is behoorlijk populair en stelt je in staat om aangepaste componenten te bouwen met behulp van echte CSS in je JavaScript. Een gestyled-component is in feite een React-component met - maak je er klaar voor - stijlen. Enkele van de functies zijn onder meer unieke klassenamen, dynamische styling en beter beheer van de CSS, aangezien elke component zijn eigen afzonderlijke stijlen heeft.
Installeer het styled-components npm-pakket in de opdrachtregel:
npm install styled-componentsImporteer het vervolgens in de React-app:
import styled from 'styled-components'Maak een component en wijs er een stijleigenschap aan toe. Let op het gebruik van sjabloonletters die worden aangegeven met backticks in de Wrapper voorwerp:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Bovenstaande Wrapper component wordt weergegeven als een div die die stijlen bevat.
Voorwaardelijke styling
Een van de voordelen van gestileerde componenten is dat de componenten zelf functioneel zijn, omdat je rekwisieten kunt gebruiken binnen de CSS. Dit opent de deur naar voorwaardelijke uitspraken en veranderende stijlen op basis van een staat of prop.
Hier is een demo die dat laat zien:
Hier manipuleren we de div's display eigenschap op de weergave staat. Deze status wordt beheerd door een knop die de status van de div verandert wanneer erop wordt geklikt. Dit schakelt op zijn beurt tussen de stijlen van twee verschillende staten.
In lijn if uitspraken, gebruiken we a ? in plaats van het gebruikelijke if/else syntaxis. De else deel staat na de puntkomma. En vergeet niet om altijd de status te bellen of te gebruiken nadat deze is geïnitialiseerd. In die laatste demo moet de status bijvoorbeeld boven de zijn Wrapper stijlen van de componenten.
Fijne React-styling!
Dat is een wrap, mensen! We hebben gekeken naar een handvol verschillende manieren om stijlen te schrijven in een React-toepassing. En het is niet alsof de een beter is dan de rest; welke aanpak je hanteert hangt natuurlijk af van de situatie. Hopelijk heb je ze nu goed begrepen en weet je dat je een heleboel tools in je React-stylingarsenaal hebt.
