5 способів стилізувати React за допомогою CSS [2023]

Автор

Чи знали ви, що понад 97% веб-ресурсів використовують CSS для оформлення візуальної частини?

Каскадні таблиці стилів, відомі як CSS, надають розробникам можливість створювати візуально привабливі та зручні для перегляду веб-сторінки.

Мова CSS визначає спосіб відображення документів для користувачів. У цьому контексті, документ – це файл, створений за допомогою мови розмітки, такої як XML або HTML.

Що таке стилізація в React?

Простота розробки, запуску та підтримки програм на React є ключовою причиною його популярності. React, будучи бібліотекою JavaScript, а не фреймворком, пропонує набагато більше, ніж просто готові функції та блоки коду.

Доступність повторно використовуваних компонентів, гнучкість, надійність коду, швидкість та продуктивність – ось деякі з причин, чому React посідає лідируючі позиції серед фреймворків та бібліотек JavaScript.

Стилізація в React – це процес створення візуальної привабливості різних компонентів застосунку React за допомогою CSS. Важливо зауважити, що React використовує JSX (поєднання JavaScript та XML) замість HTML як мову розмітки. Ключова відмінність полягає в тому, що HTML застосовує .class для позначення класів, тоді як JSX використовує .ClassName для цієї ж мети.

Чому варто стилізувати React за допомогою CSS?

  • Зробіть ваш застосунок адаптивним. Сучасні веб-застосунки повинні бути доступними як на маленьких, так і на великих екранах. CSS дозволяє використовувати медіа-запити у вашому застосунку React, роблячи його чутливим до різних розмірів екрану.
  • Прискорте процес розробки. Ви можете застосовувати одне і те ж CSS-правило до багатьох компонентів вашого застосунку React.
  • Зробіть застосунок React легким у підтримці. Завдяки CSS, легко змінювати зовнішній вигляд окремих компонентів або частин застосунку.
  • Покращений користувацький досвід. CSS забезпечує зручне форматування. Застосунок React з текстом і кнопками, розміщеними в логічних місцях, стає простим у навігації та використанні.

Розробники можуть використовувати кілька підходів для стилізації своїх застосунків React. Нижче наведено деякі з найбільш поширених:

Застосування вбудованих стилів

Вбудовані стилі – це найпростіший метод стилізації застосунку React, оскільки користувачам не потрібно створювати окрему таблицю стилів. CSS-стиль додається безпосередньо в код React.

Варто пам’ятати, що вбудовані стилі мають вищий пріоритет порівняно з іншими стилями. Отже, якщо у вас є зовнішня таблиця стилів з певним форматуванням, воно буде замінено вбудованим стилем.

Нижче наведено приклад застосування вбудованих стилів у React:

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Привіт Світ!!!!!</h1>
      <h2>Додайте трохи стилю!</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Елемент, що відобразиться, матиме h1 зі світло-блакитним фоном.

Переваги вбудованого стилю

  • Швидко. Це найпростіший підхід, оскільки ви додаєте стиль безпосередньо до елемента, який потрібно стилізувати.
  • Має високий пріоритет. Вбудовані стилі перекривають зовнішні таблиці стилів. Це дозволяє вам зосередитися на конкретній функції, не впливаючи на весь застосунок.
  • Ідеально підходить для створення прототипів. Ви можете використовувати вбудовані стилі для тестування функціоналу перед інтеграцією форматування у зовнішню таблицю стилів.

Недоліки вбудованого стилю

  • Може бути виснажливим. Оформлення кожного елемента безпосередньо займає багато часу.
  • Обмежений. Ви не можете використовувати такі можливості CSS, як селектори та анімації, з вбудованими стилями.
  • Велика кількість вбудованих стилів робить код JSX складним для читання.

Імпорт зовнішніх таблиць стилів

Ви можете написати CSS у зовнішньому файлі та імпортувати його до застосунку React. Цей підхід аналогічний імпорту CSS-файлу в тег <head> HTML-документа.

Для цього вам потрібно створити CSS-файл у каталозі застосунку, імпортувати його до потрібного компонента та написати правила стилю для застосунку.

Для демонстрації роботи зовнішніх CSS-таблиць, ви можете створити файл CSS під назвою App.css, а потім експортувати його наступним чином:

import { React } from "react";
import "./Components/App.css";

function App() {
  return (
    <div className="main">
    </div>
  );
}

export default App;

Наведений код імпортує зовнішню таблицю стилів до компонента App.js. Файл App.css знаходиться в папці Components.

Переваги зовнішніх таблиць стилів CSS

  • Можливість повторного використання. Ви можете використовувати одні й ті ж правила CSS для різних компонентів застосунку React.
  • Зрозумілість коду. Код легше читати, використовуючи зовнішні таблиці стилів.
  • Доступ до розширених функцій CSS. При використанні зовнішніх таблиць стилів, можна застосовувати псевдокласи та розширені селектори.

Недоліки зовнішніх таблиць стилів CSS

  • Необхідна надійна система іменування, щоб стилі не перекривалися.

Використання модулів CSS

Застосунки React можуть стати досить великими. Назви CSS-анімацій та класів за замовчуванням мають глобальний характер. Це може стати проблемою при роботі з великими таблицями стилів, оскільки один стиль може перекривати інший.

Модулі CSS розв’язують цю проблему, локалізуючи анімації та назви класів. Цей підхід гарантує, що назви класів доступні лише у файлі або компоненті, де вони потрібні. Кожна назва класу отримує унікальну програмну назву, що дозволяє уникнути конфліктів.

Щоб використовувати модулі CSS, створіть файл з розширенням .module.css. Якщо ви хочете назвати таблицю стилів style, ім’я файлу буде style.module.css.

Імпортуйте створений файл у ваш компонент React і ви готові до роботи.

Ваш CSS-файл може мати приблизно такий вигляд:

/* styles.module.css */

.font {
  color: #f00;
  font-size: 30px;
}

Ви можете імпортувати модуль CSS у ваш App.js наступним чином:

import { React } from "react";
import styles from "./styles.module.css";

function App() {
  return (
    <h1 className={styles.heading}>Привіт читачу techukraine.net</h1>
  );
}

export default App;

Переваги використання модулів CSS

  • Легка інтеграція з SCSS та CSS.
  • Уникає конфліктів імен класів.

Недоліки використання модулів CSS

  • Посилання на назви класів за допомогою модулів CSS може заплутати початківців.

Використання Styled-Components

Styled-components дозволяють розробникам створювати компоненти з CSS прямо в коді JavaScript. Стилізований компонент функціонує як компонент React, що вже має стилі. Styled-components пропонують динамічний стиль та унікальні назви класів.

Щоб розпочати використання Styled-Components, встановіть пакет у кореневу папку за допомогою команди:

npm install styled-components

Наступним кроком буде імпортування styled-components у ваш застосунок React.

Нижче наведено фрагмент коду App.js, який використовує styled-components:

import { React } from "react";
import styled from "styled-components";

function App() {
  const Wrapper = styled.div`
    width: 80%;
    height: 120px;
    background-color: lightblue;
    display: block;
  `;
  return <Wrapper />;
}

export default App;

Відтворений застосунок матиме стилі, імпортовані зі styled-components.

Переваги styled-components

  • Прогнозованість. Стилі у цьому методі вбудовуються безпосередньо у компоненти.
  • Немає потреби турбуватися про правила іменування класів. Просто пишіть стилі, а пакет подбає про все інше.
  • Можливість експорту стилізованих компонентів як реквізитів. styled-components перетворюють звичайний CSS на компоненти React. Таким чином, ви можете повторно використовувати код, розширювати стилі за допомогою реквізитів та експортувати.

Недоліки styled-components

  • Необхідність встановлення сторонньої бібліотеки для початку роботи.

Синтаксично чудові таблиці стилів (SASS/SCSS)

SASS пропонує потужніші інструменти та функції, яких немає у звичайному CSS. Ви можете писати стилі у двох різних стилях з розширеннями: .scss і .sass.

Синтаксис SASS схожий на звичайний CSS. Однак вам не потрібні відкриваючі та закриваючі дужки при написанні правил стилю в SASS.

Простий фрагмент SASS виглядатиме так:

nav
  ul
    margin-right: 20px
    padding: 0
    list-style: list
  li
    display: block
  a
    display: block
    padding: 6px 12px
    text-decoration: underline
nav

Щоб почати використовувати SASS у вашому застосунку React, вам потрібно спочатку скомпілювати SASS у звичайний CSS. Після налаштування застосунку за допомогою Create React App, ви можете встановити node-sass для компіляції.

npm install node-sass

Потім ви можете створити свої файли та дати їм розширення .scss або .sass. Після цього імпортуйте файли звичайним способом. Наприклад:

import "./Components/App.sass";

Переваги SASS/SCSS

  • Наявність багатьох динамічних функцій, таких як міксини, вкладення та розширення.
  • Вам не потрібно писати CSS-код, використовуючи SASS/SCSS.

Недоліки SASS/SCSS

  • Стилі є глобальними, тому можуть виникнути проблеми з перекриттям.

Який підхід до стилізації є найкращим?

Після розгляду п’яти підходів, ви, можливо, хочете знати, який з них є найкращим. Складно виділити однозначного переможця. Однак, наступні міркування можуть допомогти вам зробити обґрунтований вибір:

  • Показники продуктивності.
  • Чи потрібна вам система дизайну.
  • Легкість оптимізації коду.

Вбудований стиль підходить, якщо у вас простий застосунок з невеликою кількістю коду. Усі інші методи: зовнішні таблиці стилів, SASS, styled-components та модулі CSS, підходять для великих застосунків.

Які найкращі практики підтримки CSS у великому застосунку React?

  • Уникайте вбудованого стилю. Написання вбудованих стилів CSS для кожного елемента у великому застосунку React може бути стомлюючим. Замість цього використовуйте зовнішню таблицю стилів, яка відповідає вашим потребам.
  • Лінтуйте код. Лінтери, такі як Stylelint, виявляють помилки стилю у вашому коді, дозволяючи їх своєчасно виправити.
  • Регулярно перевіряйте код. Написання CSS є захопливим процесом, але регулярні перевірки коду спрощують виявлення помилок на ранніх етапах.
  • Автоматизуйте тестування CSS-файлів. Enzyme та Jest – це чудові інструменти, які можна використовувати для автоматизації тестування коду CSS.
  • Зберігайте код “сухим”. При роботі з часто використовуваними стилями, такими як кольори та відступи, використовуйте змінні та класи, керуючись принципом “Не повторюй себе” (DRY).
  • Використовуйте угоди про іменування, наприклад, модифікатор блокового елемента. Цей підхід дозволяє легко писати класи CSS, які легко зрозуміти та використовувати повторно.

Висновок

Вище наведено декілька способів стилізації React. Вибір підходу до стилізації залежить від ваших потреб, навичок та особистих уподобань. Ви навіть можете комбінувати різні підходи, такі як вбудовані та зовнішні таблиці стилів, у своєму застосунку React.

Також ви можете ознайомитися з деякими найкращими фреймворками та бібліотеками CSS для фронтенд розробників.