Различия

Показаны различия между двумя версиями страницы.

--- stili_react [2024/03/05 21:11]
tro
+++ stili_react [2024/03/11 19:22] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Стилі (react) ======
-===== Вбудовані стиілі =====
+===== 1 Вбудовані стиілі =====
 <code>
@@ Строка 22: / Строка 22: @@
 </code>
+<code>
+// 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>
+    </>
+  );
+};
+</code>
+===== 2 Динамічні стилі =====
+щоб залежно від типу оповіщення, у компоненті Alert змінювався колір фону абзацу. Для цього додамо йому обов'язковий пропс variant з кількома можливими значеннями.
+<code>
+// 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>
+    </>
+  );
+};
+</code>
+===== 3 Модульні стилі (правильний метод) =====
+  - У тій же теці де сам модуль, кладемо і файл з стилямии
+  - Якщо модуль зветься FriendListItem.jsx то файл повинн зватись FriendListItem.module
+<code>
+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
+</code>
+<code>
+.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;
+}
+</code>