logo

TechCodeview

Iekļauts stils programmā React

Ievads

Priekšgala projektos, kuriem reti nepieciešama vienas lapas lietotne, DOM elementu iekļautie stili bieži tiek ievietoti mērķa elementa >' atribūts.

Taču programmā React lietas ir pavisam citādas attiecībā uz iestrādāto stilu. Šajā rokasgrāmatā galvenā uzmanība pievērsta tam, lai to panāktu, izmantojot reālu lietotāja profila kartes komponenta izveides piemēru.

React komponentu veidošana

Iespējams, jūs jau zināt parasto veidu, kā veidot React komponentus, izmantojot atribūtu classname kopā ar ārēju stila 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

Iekļautie stili

Tāda paša rezultāta iegūšana ar iekļautajiem stiliem darbojas diezgan atšķirīgi. Lai lietotnē React izmantotu iekļautos stilus, izmantojiet stila atribūtu, kas pieņem JavaScript objektu ar kamieļa īpašībām. Piemērs:

 function MyComponent(){ return Inline Styled Component }

Ņemiet vērā, ka polsterējuma vērtībai nav vienības, jo React pievieno a 'px ' sufikss dažiem skaitļu iekļauto stila rekvizītiem. Gadījumos, kad ir jāizmanto citas vienības, piemēram, “em” vai “rem”, skaidri norādiet vienību ar vērtību kā virkni. Lietojot to polsterējuma rekvizītam, jābūt polsterējumam: '1,5 em' .

Turklāt šiem stiliem netiek automātiski pievienoti piegādātāja prefiksi, tāpēc pārdevēja prefiksi ir jāpievieno manuāli.

Uzlabojiet lasāmību

MyComponent lasāmība krasi samazinās, ja stilu kļūst pārāk daudz un viss kļūst neveikls. Kā parādīts tālāk, tā kā stili ir tikai objekti, tos var noņemt no komponenta.

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

jsx

Kartes komponenta izveide

Izveidosim lietotāja kartes komponentu.

 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> }

Īkšķa noteikums

Oficiālā React dokumentācija aizliedz izmantot iekļauto stilu kā galveno projektu veidošanas līdzekli un tā vietā iesaka izmantot atribūtu className.

Piezīme. Dažos dokumentācijas piemēros ērtības labad tiek izmantots stils, taču parasti nav ieteicams izmantot stila atribūtu kā galveno stila elementu veidošanas līdzekli.

Vairumā gadījumu, klases nosaukums s ir jāattiecas uz klasēm, kas definētas ārējā CSS stila lapā. Stili bieži tiek izmantoti React lietotnēs, lai renderēšanas laikā pievienotu dinamiski aprēķinātus stilus.