Oleme kõik tuttavad tavapäraste viisidega laaditabeli linkimine Euroopa <head> HTML-dokumendist, eks? See on vaid üks mitmest viisist, kuidas saame CSS-i kirjutada. Aga kuidas näeb välja asjade stiilimine ühelehelises rakenduses (SPA), näiteks Reacti projektis?
Selgub, et Reacti rakenduse kujundamiseks on mitu võimalust. Mõned kattuvad traditsioonilise stiiliga, teised mitte nii palju. Kuid loeme üles kõik võimalused, mida saame teha.
Väliste stiilitabelite importimine
Nagu nimigi ütleb, saab React importida CSS-faile. Protsess sarnaneb sellega, kuidas me HTML-is CSS-faili linkime <head>:
- Looge oma projekti kataloogis uus CSS-fail.
- Kirjutage CSS.
- Importige see React-faili.
Nagu nii:
import "./style.css";Tavaliselt asub see faili ülaosas, kus toimub muu import:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;Selles näites imporditakse CSS-fail faili App.js alates /Components/css kausta.
Kirjutage tekstisiseseid stiile
Võib-olla olete harjunud kuulma, et sisemine stiil ei ole eriti hea hooldatavuse ja muu jaoks, kuid kindlasti on olukordi (siin on üks!), kus see on mõttekas. Ja hooldatavus on Reactis vähem probleem, kuna CSS on sageli juba niikuinii samas failis.
See on ülilihtne näide Reacti tekstisisesest stiilist:
<div className="main" style={{color:"red"}}>Parem lähenemine on aga kasutada objekte:
- Esiteks loo objekt, mis sisaldab erinevate elementide stiile.
- Seejärel lisage see elemendile, kasutades nuppu
styleatribuut ja seejärel valige stiilitav atribuut.
Vaatame seda kontekstis:
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;See näide sisaldab a styles objekt, mis sisaldab veel kahte objekti, millest üks on .main klass ja teine tekstisisestuse jaoks, mis sisaldavad stiilireegleid, mis on sarnased sellele, mida eeldame välisel stiilitabelil. Seejärel rakendatakse neid objekte style tagastatud märgistuses olevate elementide atribuut.
Pange tähele, et stiilidele viitamisel kasutatakse lokkis sulgusid, mitte jutumärke, mida me tavaliselt tavalises HTML-is kasutaksime.
Kasutage CSS-i mooduleid
CSS moodulid... mis kurat nendega juhtus, eks? Nende eeliseks on kohaliku ulatusega muutujad ja neid saab kasutada koos Reactiga. Aga mis need on, jällegi, täpselt?
Tsiteerides repo dokumentatsioon:
CSS-moodulid kompileerivad üksikud CSS-failid nii CSS-iks kui ka andmeteks. CSS-i väljund on tavaline globaalne CSS, mille saab sisestada otse brauserisse või ühendada ja kirjutada faili tootmiseks kasutamiseks. Andmeid kasutatakse failides kasutatud inimloetavate nimede vastendamiseks globaalselt turvalisele väljund-CSS-ile.
Lihtsamalt öeldes võimaldavad CSS-moodulid meil kasutada sama klassinime mitmes failis ilma kokkupõrgeteta, kuna igale klassinimele antakse kordumatu programmiline nimi. See on eriti kasulik suuremates rakendustes. Iga klassi nimi on lokaalselt hõlmatud konkreetse komponendiga, millesse see imporditakse.
CSS-mooduli laaditabel sarnaneb tavalisele laaditabelile, ainult erineva laiendiga (nt styles.module.css). Need on seadistatud järgmiselt.
- Looge fail rakendusega
.module.csslaiendusena. - Importige see moodul rakendusse React (nagu nägime varem)
- Lisa
classNameelemendile või komponendile ja viidake imporditud stiilide konkreetsele stiilile.
Super lihtne näide:
/* 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;Kasutage stiilikomponente
Kas olete kasutanud stiililised komponendid? See on üsna populaarne ja võimaldab teil luua kohandatud komponente, kasutades JavaScriptis tegelikku CSS-i. Stiiliga komponent on põhimõtteliselt Reacti komponent koos stiilidega – ole selleks valmis. Mõned funktsioonid hõlmavad ainulaadseid klassinimesid, dünaamilist stiili ja CSS-i paremat haldamist, kuna igal komponendil on oma eraldi stiilid.
Installige käsureale pakett styled-components npm:
npm install styled-componentsJärgmisena importige see rakendusse React:
import styled from 'styled-components'Looge komponent ja määrake sellele stiililine atribuut. Pöörake tähelepanu malliliteraalide kasutamisele, mis on tähistatud märgetega 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;Ülaltoodud Wrapper komponent renderdatakse neid stiile sisaldava div-na.
Tingimuslik stiil
Stiilitud komponentide üks eeliseid on see, et komponendid ise on funktsionaalsed, kuna saate kasutada CSS-is rekvisiite. See avab ukse tingimuslikele väidetele ja stiilide muutmisele oleku või rekvisiidi alusel.
Siin on demo, mis seda näitab:
Siin me manipuleerime dividega display omadus kuva olekus. Seda olekut juhitakse nupuga, mis lülitab klõpsamisel div olekut. See omakorda lülitub kahe erineva oleku stiilide vahel.
Sees if avaldusi, kasutame a ? tavapärase asemel if/else süntaks. The else osa on pärast semikoolonit. Ja ärge unustage alati helistada või kasutada olekut pärast selle lähtestamist. Näiteks selles viimases demos peaks riik olema ülalpool Wrapper komponendi stiilid.
Head Reacti stiili!
See on ümbris, inimesed! Vaatasime käputäis erinevaid viise stiilide kirjutamiseks Reacti rakenduses. Ja see ei ole nii, et üks on parem kui ülejäänud; teie kasutatav lähenemisviis sõltub muidugi olukorrast. Loodetavasti olete nüüd neist hästi aru saanud ja teate, et teie Reacti stiiliarsenalis on hunnik tööriistu.
