Vsi poznamo standardni način povezovanje tabele slogov k <head> dokumenta HTML, kajne? To je le eden od več načinov, kako lahko pišemo CSS. Toda kako je videti stilizirati stvari v enostranski aplikaciji (SPA), recimo v projektu React?
Izkazalo se je, da obstaja več načinov za oblikovanje aplikacije React. Nekateri se prekrivajo s tradicionalnim stilom, drugi ne toliko. Toda preštejmo vse načine, kako lahko to storimo.
Uvažanje zunanjih datotek slogov
Kot že ime pove, lahko React uvozi datoteke CSS. Postopek je podoben povezovanju datoteke CSS v HTML <head>:
- Ustvarite novo datoteko CSS v imeniku vašega projekta.
- Napišite CSS.
- Uvozite ga v datoteko React.
Všečkaj to:
import "./style.css";To je običajno na vrhu datoteke, kjer se zgodijo drugi uvozi:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;V tem primeru je datoteka CSS uvožena v App.js Iz /Components/css mapa.
Pišite vstavljene sloge
Morda ste že navajeni slišati, da vgrajeni stil ni tako dober za vzdrževanje in še kaj, vendar zagotovo obstajajo situacije (tukaj je ena!), kjer je to smiselno. In vzdrževanje je manjša težava v Reactu, saj je CSS tako ali tako pogosto že znotraj iste datoteke.
To je super preprost primer oblikovanja v vrstici v Reactu:
<div className="main" style={{color:"red"}}>Boljši pristop pa je uporaba predmetov:
- Najprej ustvarite predmet, ki vsebuje sloge za različne elemente.
- Nato ga dodajte elementu z uporabo
stylein nato izberite lastnost za slog.
Poglejmo to v kontekstu:
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;Ta primer vsebuje a styles objekt, ki vsebuje še dva predmeta, enega za .main razred in drugo za vnos besedila, ki vsebuje pravila sloga, podobna tistim, ki bi jih pričakovali v zunanji tabeli slogov. Ti predmeti se nato uporabijo za style elementov, ki so v vrnjeni oznaki.
Upoštevajte, da se pri sklicevanju na sloge uporabljajo zavit oklepaj namesto narekovajev, ki bi jih običajno uporabljali v navadnem HTML-ju.
Uporabite module CSS
Moduli CSS... kaj za vraga se je zgodilo s temi, kajne? Imajo prednost spremenljivk z lokalnim obsegom in jih je mogoče uporabiti poleg Reacta. Toda kaj točno so spet?
Citiranje repo dokumentacijo:
Moduli CSS delujejo tako, da posamezne datoteke CSS prevajajo v CSS in podatke. Izhod CSS je običajen, globalni CSS, ki ga je mogoče vnesti neposredno v brskalnik ali združiti in zapisati v datoteko za produkcijsko uporabo. Podatki se uporabljajo za preslikavo človeku berljivih imen, ki ste jih uporabili v datotekah, v globalno varen izhodni CSS.
Preprosteje rečeno, moduli CSS nam omogočajo uporabo istega imena razreda v več datotekah brez navzkrižij, saj ima vsako ime razreda edinstveno programsko ime. To je še posebej uporabno pri večjih aplikacijah. Vsako ime razreda je lokalno omejeno na specifično komponento, v katero se uvaža.
Lista slogov modula CSS je podobna običajni tabeli slogov, le z drugačno razširitvijo (npr styles.module.css). Takole so nastavljeni:
- Ustvarite datoteko z
.module.csskot razširitev. - Uvozite ta modul v aplikacijo React (kot smo videli prej)
- Dodaj
classNamena element ali komponento in se sklicujte na določen slog iz uvoženih slogov.
Super preprost primer:
/* 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;Uporabite stilizirane komponente
Ste že vajeni stilizirane komponente? Je zelo priljubljen in vam omogoča izdelavo komponent po meri z uporabo dejanskega CSS v vašem JavaScriptu. Slogirana komponenta je v bistvu komponenta React s slogi – pripravite se na to. Nekatere funkcije vključujejo edinstvena imena razredov, dinamično oblikovanje in boljše upravljanje CSS, saj ima vsaka komponenta svoje ločene sloge.
Namestite paket styled-components npm v ukazno vrstico:
npm install styled-componentsNato ga uvozite v aplikacijo React:
import styled from 'styled-components'Ustvarite komponento in ji dodelite lastnost sloga. Upoštevajte uporabo literalov predloge, označenih s povratnimi kljukicami v Wrapper predmet:
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;Zgoraj Wrapper komponenta bo upodobljena kot div, ki vsebuje te sloge.
Pogojno oblikovanje
Ena od prednosti styled-component je, da so same komponente funkcionalne, saj lahko uporabite rekvizite znotraj CSS. To odpira vrata do pogojnih stavkov in spreminjanja slogov na podlagi stanja ali prop.
Tukaj je demo, ki to prikazuje:
Tukaj manipuliramo z divi display lastnost stanja prikaza. To stanje nadzira gumb, ki ob kliku preklopi stanje diva. To pa preklaplja med slogi dveh različnih stanj.
V vrstici if izjave, uporabljamo a ? namesto običajnega if/else sintaksa. The else del je za podpičjem. In ne pozabite, da vedno pokličete ali uporabite stanje, potem ko je bilo inicializirano. V zadnji predstavitvi bi moralo biti na primer stanje nad Wrapper slogi komponent.
Srečno React stajling!
To je zaključek, ljudje! Ogledali smo si nekaj različnih načinov pisanja slogov v aplikaciji React. In ni tako, da je eden boljši od ostalih; pristop, ki ga uporabljate, je seveda odvisen od situacije. Upajmo, da jih zdaj dobro razumete in veste, da imate v svojem slogovnem arzenalu React veliko orodij.
