Vi er alle bekendt med standardmetoden sammenkædning af et stylesheet til <head> af et HTML-dokument, ikke? Det er blot en af flere måder, vi er i stand til at skrive CSS på. Men hvordan ser det ud at style ting i en enkeltsides applikation (SPA), for eksempel i et React-projekt?
Det viser sig, at der er flere måder at style en React-applikation på. Nogle overlapper med traditionel styling, andre ikke så meget. Men lad os tælle alle de måder, vi kan gøre det på.
Import af eksterne stylesheets
Som navnet antyder, kan React importere CSS-filer. Processen ligner, hvordan vi sammenkæder CSS-fil i HTML <head>:
- Opret en ny CSS-fil i dit projektbibliotek.
- Skriv CSS.
- Importer det til React-filen.
Sådan her:
import "./style.css";Det går normalt øverst i filen, hvor andre importer finder sted:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;I dette eksempel importeres en CSS-fil til en App.js fra /Components/css mappe.
Skriv inline-stile
Du er måske vant til at høre, at inline-styling ikke er så fantastisk til vedligeholdelse og lignende, men der er helt sikkert situationer (her er en!) hvor det giver mening. Og vedligeholdelse er mindre af et problem i React, da CSS'en ofte allerede sidder i den samme fil alligevel.
Dette er et super simpelt eksempel på inline styling i React:
<div className="main" style={{color:"red"}}>En bedre tilgang er dog at bruge objekter:
- Først skal du oprette et objekt, der indeholder typografier til forskellige elementer.
- Føj det derefter til et element ved hjælp af
styleattribut og vælg derefter den egenskab, der skal styles.
Lad os se det i sammenhæng:
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;Dette eksempel indeholder en styles objekt, der indeholder yderligere to objekter, en til .main klasse og den anden for et tekstinput, som indeholder stilregler svarende til det, vi ville forvente at se i et eksternt typografiark. Disse objekter anvendes derefter på style attribut for elementer, der er i den returnerede markup.
Bemærk, at der bruges krøllede parenteser, når der refereres til typografier i stedet for de anførselstegn, vi normalt ville bruge i almindelig HTML.
Brug CSS-moduler
CSS-moduler... hvad fanden skete der med dem, ikke? De har fordelen ved lokale variabler og kan bruges lige ved siden af React. Men hvad er de, igen, helt præcist?
Citerer repo's dokumentation:
CSS-moduler fungerer ved at kompilere individuelle CSS-filer til både CSS og data. CSS-outputtet er normal, global CSS, som kan injiceres direkte i browseren eller kædes sammen og skrives til en fil til produktionsbrug. Dataene bruges til at kortlægge de menneskelæselige navne, du har brugt i filerne, til den globalt sikre output CSS.
I enklere termer giver CSS-moduler os mulighed for at bruge det samme klassenavn i flere filer uden sammenstød, da hvert klassenavn får et unikt programmatisk navn. Dette er især nyttigt i større applikationer. Hvert klassenavn er lokaliseret til den specifikke komponent, hvori det importeres.
Et CSS-modul stilark ligner et almindeligt typografiark, kun med en anden udvidelse (f styles.module.css). Sådan er de sat op:
- Opret en fil med
.module.csssom forlængelse. - Importer det modul til React-appen (som vi så tidligere)
- Føj til
classNametil et element eller en komponent og referer til den bestemte stil fra de importerede stilarter.
Super simpelt eksempel:
/* 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;Brug stylede komponenter
Har du brugt stylede-komponenter? Det er ret populært og giver dig mulighed for at bygge brugerdefinerede komponenter ved hjælp af faktiske CSS i din JavaScript. En stylet-komponent er grundlæggende en React-komponent med - gør dig klar til det - stilarter. Nogle af funktionerne inkluderer unikke klassenavne, dynamisk stil og bedre styring af CSS, da hver komponent har sine egne separate stilarter.
Installer styled-components npm-pakken på kommandolinjen:
npm install styled-componentsDernæst importerer du det til React-appen:
import styled from 'styled-components'Opret en komponent og tildel en stylet egenskab til den. Bemærk brugen af skabelonliteraler angivet med backticks i Wrapper objekt:
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;Ovenstående Wrapper komponent vil blive gengivet som en div, der indeholder disse typografier.
Betinget styling
En af fordelene ved stylede-komponenter er, at selve komponenterne er funktionelle, da du kan bruge rekvisitter i CSS'en. Dette åbner døren op til betingede udsagn og skiftende stilarter baseret på en tilstand eller rekvisit.
Her er en demo, der viser det:
Her manipulerer vi div'erne display egenskab på visningstilstanden. Denne tilstand styres af en knap, der skifter div'ens tilstand, når der klikkes på den. Dette skifter til gengæld mellem stilene i to forskellige stater.
I inline if udsagn, bruger vi en ? i stedet for det sædvanlige if/else syntaks. Det else del er efter semikolon. Og husk altid at ringe eller bruge tilstanden efter den er blevet initialiseret. I den sidste demo, for eksempel, skulle staten være over Wrapper komponentens stilarter.
Glad React styling!
Det er en indpakning, folkens! Vi så på en håndfuld forskellige måder at skrive stilarter på i en React-applikation. Og det er ikke sådan, at man er bedre end de andre; den tilgang du bruger afhænger selvfølgelig af situationen. Forhåbentlig har du nu fået en god forståelse af dem og ved, at du har en masse værktøjer i dit React-styling-arsenal.
