Стилі (react)

Вбудовані стиілі

// src/components/App.jsx
export const App = () => {
return (
<p
style={{
margin: 8,
padding: "12px 16px",
borderRadius: 4,
backgroundColor: "gray",
color: "white",
}}
>
Please update your email!
</p>
);
};

// src/components/App.jsx
const alertStyles = {
margin: 8,
padding: "12px 16px",
borderRadius: 4,
backgroundColor: "gray",
color: "white",
};
export 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>
</>
);
};

Динамічні стилі

щоб залежно від типу оповіщення, у компоненті Alert змінювався колір фону абзацу. Для цього додамо йому обов'язковий пропс variant з кількома можливими значеннями.

// src/components/App.jsx
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>
</>
);
};