Moduł 1 - Zajęcia 2 - Style wbudowane
Istnieje kilka sposobów stylowania komponentów, z których najprostszym (ale jednocześnie najbardziej ograniczonym) są style wbudowane. W tym celu używany jest atrybut HTML style, który w składni JSX React przyjmuje obiekt styli (w przeciwieństwie do oryginalnej składni HTML, która oczekuje łańcucha znaków).
src/components/App.js
const App = () => {
return (
<p
style={{
margin: 8,
padding: "12px 16px",
borderRadius: 4,
backgroundColor: "gray",
color: "white",
}}
>
Please update your email!
</p>
);
};
Na podstawie powyższego przykładu możemy wyróżnić kilka reguł dla obiektu style:
- Na podstawie powyższego przykładu możemy wyróżnić kilka reguł dla obiektu style:
- Na podstawie powyższego przykładu możemy wyróżnić kilka reguł dla obiektu style:
Przenieśmy obiekt style do zmiennej, aby poprawić czytelność znaczników JSX.
src/components/Alert.js
const alertStyles = {
margin: 8,
padding: "12px 16px",
borderRadius: 4,
backgroundColor: "gray",
color: "white",
};
const App = () => {
return (
<>
<p style={alertStyles}>Please update your email!</p>
<p style={alertStyles}>There was an error during transaction!</p>
<p style={alertStyles}>Payment received, thank you for your purchase!</p>
</>
);
};
Utwórzmy komponent Alert, który wyrenderuje akapit tekstu i pozwoli nam następnie na dodanie logiki wyboru koloru tła.
src/components/Alert.js
const alertStyles = {
margin: 8,
padding: "12px 16px",
borderRadius: 4,
backgroundColor: "gray",
color: "white",
};
export const Alert = ({ children }) => {
return <p style={alertStyles}>{children}</p>;
};
Użyjmy komponentu Alert do wyrenderowania kilku alertów.
src/components/App.js
import { Alert } from "./Alert";
const App = () => {
return (
<>
<Alert>Please update your email!</Alert>
<Alert>There was an error during transaction!</Alert>
<Alert>Payment received, thank you for your purchase!</Alert>
</>
);
};
Teraz, że w zależności od typu alertu chcielibyśmy zmienić kolor tła w komponencie Alert. Aby to zrobić, rozszerzmy interfejs komponentu Alert o nową właściwość (props) variant, która będzie akceptować kilka wartości.
src/components/App.js
import { Alert } from "./Alert";
const App = () => {
return (
<>
<Alert variant="info">
Would you like to browse our recommended products?
</Alert>
<Alert variant="error">
There was an error during your last transaction
</Alert>
<Alert variant="success">
Payment received, thank you for your purchase
</Alert>
<Alert variant="warning">
Please update your profile contact information
</Alert>
</>
);
};
Dodatkowo przenieśmy logikę wyboru koloru do funkcji getBgColor(variant), która zwróci łańcuch z nazwą koloru w zależności od wartości parametru variant.
src/components/Alert.js
const alertStyles = {
margin: 8,
padding: "12px 16px",
borderRadius: 4,
color: "white",
};
const getBgColor = variant => {
switch (variant) {
case "info":
return "blue";
case "success":
return "green";
case "error":
return "red";
case "warning":
return "orange";
default:
throw new Error(`Unsupported variant prop value - ${variant}`);
}
};
export const Alert = ({ variant, children }) => {
return (
<p style={{ ...alertStyles, backgroundColor: getBgColor(variant) }}>
{children}
</p>
);
};
W 25. wierszu przykładu tworzona jest ostateczna wartość atrybutu style. Składa się on ze styli bazowych alertStyles oraz dynamicznej wartości backgroundColor, ustalanej w zależności od właściwości variant. To podejście jest stosowane, gdy wartość stylu CSS zależy od właściwości (props). Na przykład kiedy odwołanie do obrazu dla background-image jest przekazywane jako rekwizyt.
Style inline mogą wydawać się wygodne ze względu na łatwość ich użycia, ale mają wiele istotnych wad.
- Bardzo słaba skalowalność i ponowne wykorzystanie styli w innych miejscach aplikacji
- Ograniczone funkcje (pseudoklasy, pseudoelementy, właściwości adaptacyjne)
- Kiepska wydajność podczas renderowania dużej liczby elementów
- Brak wygodnych narzędzi programistycznych ułatwiających pracę ze stylami
- Brak wsparcia popularnych narzędzi, takich jak autoprefixer
W praktyce style wbudowane są używane tylko dla wartości właściwości CSS obliczanych dynamicznie, w połączeniu z zewnętrznymi arkuszami stylów. Nie są one jednak zalecane i dlatego nie powinny być używane w projektach.