logo

TechCodeview

Įdėtas stilius „React“.

Įvadas

Frontend projektuose, kuriems retai reikalinga vieno puslapio programa, eilutiniai DOM elementų stiliai dažnai dedami į tikslinio elemento >“ atributas.

Tačiau „React“ viskas yra visiškai kitaip, kalbant apie stilių. Šiame vadove dėmesys sutelkiamas į tai, kaip tai pasiekti naudojant realų vartotojo profilio kortelės komponento kūrimo pavyzdį.

React komponentų stiliaus kūrimas

Galbūt jau žinote apie įprastą React komponentų stiliaus formavimo būdą, naudojant atributą classname kartu su išoriniu stilių lapu:

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

jsx 

 paragraph-text{ font-weight: bold; color: beige; }

CSS

Įterpti stiliai

To paties rezultato gavimas naudojant įterptus stilius veikia gana skirtingai. Norėdami naudoti eilutinius stilius React, naudokite stiliaus atributą, kuris priima JavaScript objektą su kupranugarių savybėmis. Pavyzdys:

 function MyComponent(){ return Inline Styled Component }

Atminkite, kad užpildymo reikšmė neturi vieneto, nes „React“ prideda a 'px ' kai kurių skaičių eilutinio stiliaus savybių priesaga. Tais atvejais, kai reikia naudoti kitus vienetus, pvz., „em“ arba „rem“, aiškiai nurodykite vienetą su verte kaip eilutę. Taikant tai užpildymo ypatybei, turėtų būti užpildymas: „1,5 em“ .

Be to, šie stiliai nėra automatiškai pateikiami tiekėjo prefiksais, todėl pardavėjo priešdėlius turite pridėti rankiniu būdu.

Pagerinkite skaitomumą

„MyComponent“ skaitomumas smarkiai sumažėja, jei stilių tampa per daug ir viskas tampa netvarkinga. Kaip parodyta toliau, kadangi stiliai yra tik objektai, juos galima pašalinti iš komponento.

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

jsx

Kortelės komponento kūrimas

Sukurkime vartotojo kortelės komponentą.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

Nykščio taisyklė

Oficialioje „React“ dokumentacijoje draudžiama naudoti tiesioginį stilių kaip pagrindinę projektų stiliaus kūrimo priemonę ir vietoj to rekomenduojama naudoti atributą „className“.

Pastaba Kai kuriuose dokumentacijos pavyzdžiuose patogumo sumetimais naudojamas stilius, tačiau paprastai nerekomenduojama stiliaus atributo naudoti kaip pagrindinę stiliaus elementų priemonę.

Daugeliu atvejų, klasės pavadinimas s turėtų reikšti klases, apibrėžtas išoriniame CSS stiliaus lape. Stiliai dažnai naudojami „React“ programose, siekiant pridėti dinamiškai apskaičiuotų stilių pateikimo metu.