stili_react [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Стилі (react) ======
===== 1 Вбудовані стиілі =====

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

</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>