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 'react' import './style.css' 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: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Tworzenie komponentu karty
Zbudujmy komponent karty użytkownika.
const cardStyles = { container: { display: 'flex', height: 100, width: 400, boxShadow: '0 0 3px 2px #cec7c759', alignItems: 'center', padding: 20, borderRadius: 20, }, profilePicture: { display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'orange', color: 'white', height: 20, width: 20, borderRadius: '50%', padding: 10, fontWeight: 'bold', }, bio: { marginLeft: 10, }, userName: { fontWeight: 'bold', }, }; 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.