Johdanto

Käyttöliittymäprojekteissa, jotka harvoin vaativat yksisivuista sovellusta, DOM-elementtien upotetut tyylit sijoitetaan usein kohdeelementin >' attribuutti.

Mutta Reactissa asiat ovat aivan erilaisia ​​​​inline-muotoilun suhteen. Tämä opas keskittyy tämän saavuttamiseen käyttämällä todellista esimerkkiä käyttäjäprofiilikorttikomponentin luomisesta.

Komponenttien muotoilu Reactissa

Saatat olla jo tietoinen tavallisesta tavasta muotoilla React-komponentteja käyttämällä classname-attribuuttia yhdessä ulkoisen tyylitaulukon kanssa:

 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

Sisäiset tyylit

Saman tuloksen saaminen upotetuilla tyyleillä toimii aivan eri tavalla. Jos haluat käyttää sisäisiä tyylejä Reactissa, käytä style-attribuuttia, joka hyväksyy JavaScript-objektin kamelin ominaisuuksilla. Esimerkki:

 function MyComponent(){ return Inline Styled Component } 

Huomaa, että täytearvolla ei ole yksikköä, koska React lisää a 'px ' -liite joihinkin numeerisiin rivin tyyliominaisuuksiin. Tapauksissa, joissa sinun on käytettävä muita yksiköitä, kuten 'em' tai 'rem', määritä yksikkö nimenomaisesti arvon kanssa merkkijonona. Kun tätä käytetään täyttöominaisuuteen, tulisi olla täyte: '1,5 em' .

Näihin tyyleihin ei myöskään lisätä automaattisesti toimittajan etuliitettä, joten sinun on lisättävä toimittajan etuliitteet manuaalisesti.

Paranna luettavuutta

MyComponentin luettavuus laskee dramaattisesti, jos tyylejä tulee liikaa ja kaikki muuttuu kömpelöksi. Kuten alla näkyy, koska tyylit ovat vain objekteja, ne voidaan poistaa komponentista.

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

jsx

Korttikomponentin rakentaminen

Rakennetaan käyttäjäkorttikomponentti.

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

Nyrkkisääntö

Virallisessa React-dokumentaatiossa kielletään inline-tyylien käyttäminen ensisijaisena muotoiluprojektien keinona ja suositellaan sen sijaan className-attribuutin käyttöä.

Huomautus Joissakin dokumentaation esimerkeissä käytetään tyyliä mukavuuden vuoksi, mutta tyylimääritteen käyttöä ei yleensä suositella tyylielementtien ensisijaisena keinona.

Useimmissa tapauksissa, luokan nimi s:n tulee viitata ulkoisessa CSS-tyylitaulukossa määriteltyihin luokkiin. React-sovelluksissa käytetään usein tyylejä dynaamisesti laskettujen tyylien lisäämiseen renderöintihetkellä.