Стилі (react)

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

// 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>
</>
);
};

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

щоб залежно від типу оповіщення, у компоненті 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>
</>
);
};

3 Модульні стилі (правильний метод)

У тій же теці де сам модуль, кладемо і файл з стилямии

Якщо модуль зветься FriendListItem.jsx то файл повинн зватись FriendListItem.module

import css from "../FriendListItem/FriendListItem.module.css";
const FriendListItem = ({avatar, name, isOnline}) => {
return (
<li className={css.FriendListItem}>
<div>
<img src={avatar} alt="Avatar" width="48" />
<p className={css.FriendListItemName} >{name}</p>
{isOnline===true?(<p className={css.FriendListItemOnline} >true</p>):(<p className={css.FriendListItemOffline}>false</p>)}
</div>
</li>
)
}
export default FriendListItem

.FriendListItem {
list-style: none;
border: 2px solid black;
padding: 15px 15px;
border-radius: 5px;
justify-content: center;
justify-items: center;
align-items: center;
text-align: center;
}
.FriendListItemName{
font-size: x-large;
margin: 0;
}
.FriendListItemOnline{
font-size: larger;
color: green;
margin: 0;
}
.FriendListItemOffline{
font-size: larger;
color: red;
margin: 0;
}