STYL WBUDOWANY W REACT

Wstęp

W projektach frontendowych, które rzadko wymagają aplikacji jednostronicowej, style inline elementów DOM są często umieszczane w elemencie docelowym > atrybut.

Ale w React sytuacja wygląda zupełnie inaczej, jeśli chodzi o stylizację inline. W tym przewodniku skupiono się na osiągnięciu tego celu, korzystając z rzeczywistego przykładu tworzenia komponentu karty profilu użytkownika.

Komponenty stylizujące w React

Być może znasz już standardowy sposób stylizowania komponentów React przy użyciu atrybutu classname w połączeniu z zewnętrznym arkuszem stylów:

 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

Style wbudowane

Uzyskanie tego samego rezultatu za pomocą stylów wbudowanych działa zupełnie inaczej. Aby używać stylów wbudowanych w React, użyj atrybutu style, który akceptuje obiekt JavaScript z właściwościami camel. Przykład:

 function MyComponent(){ return Inline Styled Component }

Zauważ, że wartość dopełnienia nie ma jednostki, ponieważ React dodaje a „px ' do niektórych numerycznych właściwości stylu wbudowanego. W przypadkach, gdy musisz użyć innych jednostek, takich jak „em” lub „rem”, jawnie określ jednostkę z wartością w postaci ciągu znaków. Zastosowanie tego do właściwości dopełnienia powinno być dopełnieniem: „1,5 Em” .

Ponadto style te nie są automatycznie poprzedzane przez dostawcę, dlatego należy je dodać ręcznie.

Popraw czytelność

Czytelność MyComponent spada dramatycznie, jeśli stylów staje się zbyt wiele i wszystko staje się nieporęczne. Jak pokazano poniżej, ponieważ style są tylko obiektami, można je usunąć z komponentu.

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

jsx

Tworzenie komponentu karty

Zbudujmy komponent karty użytkownika.

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

Praktyczna zasada

Oficjalna dokumentacja Reacta stanowczo zaleca używanie stylów wbudowanych jako podstawowego sposobu stylizowania projektów i zaleca zamiast tego używanie atrybutu className.

Uwaga W niektórych przykładach w dokumentacji zastosowano styl dla wygody, ale ogólnie nie zaleca się używania atrybutu style jako podstawowego sposobu tworzenia elementów stylizacji.

W większości przypadków, Nazwa klasy s powinien odnosić się do klas zdefiniowanych w zewnętrznym arkuszu stylów CSS. Style są często używane w aplikacjach React do dodawania dynamicznie obliczanych stylów w czasie renderowania.

TechCodeview