Стилі (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; }