Cu toții suntem familiarizați cu modul standard de conectarea unei foi de stil la <head> a unui document HTML, nu? Acesta este doar unul dintre câteva moduri prin care putem scrie CSS. Dar cum arată să stilezi lucrurile într-o aplicație cu o singură pagină (SPA), să zicem într-un proiect React?
Se pare că există mai multe modalități de a stila o aplicație React. Unele se suprapun cu stilul tradițional, altele nu atât de mult. Dar haideți să numărăm toate modurile în care putem face asta.
Importul foilor de stil externe
După cum sugerează și numele, React poate importa fișiere CSS. Procesul este similar cu modul în care conectăm fișierul CSS în HTML <head>:
- Creați un nou fișier CSS în directorul de proiect.
- Scrieți CSS.
- Importați-l în fișierul React.
Asa:
import "./style.css";Acesta merge de obicei în partea de sus a fișierului, unde au loc alte importuri:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;În acest exemplu, un fișier CSS este importat într-un App.js de la /Components/css dosar.
Scrieți stiluri inline
S-ar putea să fiți obișnuiți să auziți că stilul în linie nu este deloc grozav pentru mentenanță și altele, dar cu siguranță există situații (iată una!) unde are sens. Și mentenabilitatea este mai puțin o problemă în React, deoarece CSS-ul se află oricum deja în același fișier.
Acesta este un exemplu foarte simplu de stil inline în React:
<div className="main" style={{color:"red"}}>O abordare mai bună, totuși, este să folosiți obiecte:
- Mai întâi, creați un obiect care conține stiluri pentru diferite elemente.
- Apoi adăugați-l la un element folosind
styleatribut și apoi selectați proprietatea pentru stil.
Să vedem asta în context:
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;Acest exemplu conține a styles obiect care conține încă două obiecte, unul pentru .main clasa și cealaltă pentru o introducere de text, care conțin reguli de stil similare cu ceea ce ne-am aștepta să vedem într-o foaie de stil externă. Aceste obiecte sunt apoi aplicate pe style atributul elementelor care se află în marcajul returnat.
Rețineți că parantezele sunt folosite atunci când facem referire la stiluri, mai degrabă decât ghilimelele pe care le-am folosi în mod normal în HTML simplu.
Utilizați module CSS
Module CSS… ce naiba sa întâmplat cu aceia, nu? Acestea au avantajul variabilelor locale și pot fi utilizate chiar alături de React. Dar ce sunt, din nou, mai exact?
Citând pe documentația repo:
Modulele CSS funcționează prin compilarea fișierelor CSS individuale atât în CSS, cât și în date. Ieșirea CSS este un CSS normal, global, care poate fi injectat direct în browser sau concatenat împreună și scris într-un fișier pentru utilizare în producție. Datele sunt folosite pentru a mapa numele care pot fi citite de om pe care le-ați folosit în fișiere la CSS-ul de ieșire sigur la nivel global.
În termeni mai simpli, modulele CSS ne permit să folosim același nume de clasă în mai multe fișiere fără ciocniri, deoarece fiecare nume de clasă primește un nume programatic unic. Acest lucru este util în special în aplicații mai mari. Fiecare nume de clasă este limitat local la componenta specifică în care este importată.
O foaie de stil modul CSS este similară cu o foaie de stil obișnuită, doar cu o extensie diferită (de ex styles.module.css). Iată cum sunt configurate:
- Creați un fișier cu
.module.cssca extensie. - Importați modulul respectiv în aplicația React (cum am văzut mai devreme)
- Adauga o
classNamela un element sau componentă și faceți referire la stilul particular din stilurile importate.
Exemplu super simplu:
/* 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;Utilizați componente cu stil
Ați folosit-o componente-stilizate? Este destul de popular și vă permite să construiți componente personalizate folosind CSS real în JavaScript. O componentă cu stil este, în principiu, o componentă React cu — pregătește-te pentru asta — stiluri. Unele dintre caracteristici includ nume unice de clasă, stil dinamic și o gestionare mai bună a CSS, deoarece fiecare componentă are propriile stiluri separate.
Instalați pachetul styled-components npm în linia de comandă:
npm install styled-componentsÎn continuare, importați-l în aplicația React:
import styled from 'styled-components'Creați o componentă și atribuiți-i o proprietate cu stil. Rețineți că folosirea literalelor șablon notate cu backtick-uri în Wrapper obiect:
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;Cele de mai sus Wrapper componenta va fi redată ca un div care conține acele stiluri.
Stilul condiționat
Unul dintre avantajele componentelor stilate este că componentele în sine sunt funcționale, deoarece puteți folosi elemente de recuzită în cadrul CSS. Acest lucru deschide ușa către declarații condiționate și stiluri de schimbare bazate pe o stare sau prop.
Iată o demonstrație care arată asta:
Aici, manipulăm div-urile display proprietate în starea de afișare. Această stare este controlată de un buton care comută starea div-ului atunci când este apăsat. Aceasta, la rândul său, comută între stilurile a două stări diferite.
În linie if afirmații, folosim a ? în loc de obicei if/else sintaxă. The else partea este după punct și virgulă. Și nu uitați să apelați sau să utilizați întotdeauna starea după ce a fost inițializată. În ultimul demo, de exemplu, statul ar trebui să fie deasupra Wrapper stilurile componentelor.
Happy React styling!
Ăsta e un înveliș, oameni buni! Am analizat o mână de moduri diferite de a scrie stiluri într-o aplicație React. Și nu e ca și cum unul ar fi mai bun decât restul; abordarea pe care o folosești depinde de situație, desigur. Sperăm că acum le-ați înțeles bine și știți că aveți o grămadă de instrumente în arsenalul dvs. de stil React.
