Различия

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

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