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"}}>Hello World!!!!!</h1>

      <h2>Add a little style!</h2>

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Header />);

Відображений елемент відображатиме h1 із світло-блакитним фоном.

  Як відновити обліковий запис MeetMe

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

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

Мінуси вбудованого стилю

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

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

Ви можете написати CSS у зовнішньому файлі та імпортувати його в додаток React. Цей підхід можна порівняти з імпортом файлу CSS у тег документа 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 вирішують цю проблему, локально охоплюючи анімацію та назви класів. Цей підхід гарантує, що назви класів доступні лише у файлі/компоненті, де вони потрібні. Кожне ім’я класу отримує унікальне програмне ім’я, що дозволяє уникнути конфліктів.

  Які програми постачаються з Office 365?

Щоб реалізувати модулі 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}>Hello techukraine.net reader</h1>

  );

}

export default App;

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

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

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

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

Використовуйте Styled-Components

Компоненти зі стилями дозволяють розробникам створювати компоненти за допомогою CSS у коді JavaScript. Стилізований компонент діє як компонент React, який поставляється зі стилями. Стилізовані компоненти пропонують динамічний стиль і унікальні назви класів.

Щоб почати використовувати Styled Components, ви можете встановити пакет у свою кореневу папку за допомогою цієї команди;

npm install styled-components

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

Нижче наведено фрагмент коду App.js, який використовує стилізовані компоненти;

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;

Відтворена програма матиме наведені вище стилі, імпортовані зі стилізованих компонентів.

Переваги стилізованих компонентів

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

Кон стилізованих компонентів

  • Щоб почати, вам потрібно встановити сторонню бібліотеку.

Синтаксично чудові таблиці стилів (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

  • Він поставляється з багатьма динамічними функціями, такими як міксини, вкладення та розширення.
  • Під час використання SASS/SCSS вам не потрібно писати CSS-код
  11 сучасних бізнес-розрахункових рахунків для стартапів і малого бізнесу в США

Мінуси SASS/SCSS

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

Який підхід до укладання є найкращим?

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

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

Вбудований стиль підходить, якщо у вас є проста програма з кількома рядками коду. Проте всі інші; зовнішні, SASS, стилізовані компоненти та модулі CSS підходять для великих програм.

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

  • Уникайте вбудованого стилю. Написання вбудованих стилів CSS для кожного тегу у великій програмі React може бути втомливим. Натомість використовуйте зовнішню таблицю стилів, яка відповідає вашим потребам.
  • Лінтуйте свій код. Лінтери, такі як Stylelint, висвітлять помилки стилю у вашому коді, щоб ви могли їх виправити завчасно.
  • Регулярно перевіряйте код. Написання CSS здається веселим, але регулярні перевірки коду спрощують раннє виявлення помилок.
  • Автоматизуйте тестування файлів CSS. Enzyme і Jest — чудові інструменти, які можна використовувати для автоматизації тестування вашого коду CSS.
  • Тримайте свій код СУХИМ. коли ви маєте справу із часто використовуваними стилями, такими як кольори та поля, використовуйте корисні змінні та класи відповідно до принципу Не повторюйте себе (DRY).
  • Використовуйте угоди про найменування, наприклад, модифікатор блокового елемента. Такий підхід дозволяє легко писати класи CSS, які легко зрозуміти та використовувати повторно.

Висновок

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

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