Ми всі знайомі зі стандартним способом приєднання таблиці стилів у <head> HTML-документа, чи не так? Це лише один з декількох способів написання CSS. Але як це виглядає, якщо ми хочемо створити стиль в односторінковому додатку (SPA), скажімо, в проєкті на React?
Виявляється, є кілька способів стилізації для React-застосунків. Деякі з них перетинаються з традиційною стилізацією, інші не дуже. Розгляньмо всі способи, які ми можемо використати.
Імпорт зовнішніх таблиць стилів
Як випливає з назви, React може імпортувати CSS-файли. Процес схожий на те, як ми підключаємо CSS файл до HTML в <head>:
- Створіть новий CSS-файл у директорії вашого проєкту.
- Напишіть CSS.
- Імпортуйте його до файлу React.
Приблизно так:
import "./style.css";
Зазвичай це відбувається у верхній частині файлу, де імпортуються інші дані:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
У цьому прикладі файл CSS імпортується в App.js з теки /Components/css.
Написання вбудованих стилів
Можливо, ви звикли чути, що інлайн-стилі не дуже добре впливають на підтримку коду і т.д., але є ситуації (ось одна з них!), коли це має сенс. І підтримка коду є меншою проблемою в React, оскільки CSS часто вже знаходиться в одному файлі з кодом.
Це дуже простий приклад вбудованого стилю в React:
<div className="main" style={{color:"red"}}>
Однак кращим підходом є використання об'єктів:
- Спочатку створіть об'єкт, який містить стилі для різних елементів.
- Потім додайте його до елемента за допомогою атрибута style, а потім виберіть властивість для стилю.
Розглянемо це в контексті:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;
Цей приклад містить об'єкт styles, в якому знаходяться ще два об'єкти, один для класу .main, а інший для текстового вводу, які містять правила стилів, подібні до тих, що можна було б побачити у зовнішній таблиці стилів. Ці об'єкти потім застосовуються до атрибута стилю елементів, що знаходяться у повернутій розмітці.
Зверніть увагу, що для посилання на стилі використовуються фігурні дужки, а не лапки, які ми зазвичай використовуємо у звичайному HTML.
Використання модулів CSS
Вони мають перевагу локально локалізованих змінних і можуть використовуватися разом з React. Але що це, власне, таке?
Цитуємо документацію репозиторію:
CSS-модулі працюють шляхом компіляції окремих CSS-файлів як в CSS, так і в дані. На виході виходить звичайний, глобальний CSS, який можна вставити безпосередньо в браузер або об'єднати разом і записати у файл для використання у продакшені. Дані використовуються для зіставлення читабельних імен, які ви використовували у файлах, з безпечним вихідним CSS.
Простіше кажучи, модулі CSS дозволяють нам використовувати одне і те ж ім'я класу в декількох файлах без конфліктів, оскільки кожному імені класу присвоюється унікальне програмне ім'я. Це особливо корисно у великих програмах. Кожне ім'я класу локально обмежується областю видимості конкретного компонента, до якого воно імпортується.
Таблиця стилів модуля CSS схожа на звичайну таблицю стилів, тільки з іншим розширенням (наприклад, styles.module.css). Ось як вони налаштовуються:
- Створіть файл з розширенням
.module.css. - Імпортуйте цей модуль у застосунок React (як це було зроблено раніше)
- Додайте
classNameдо елемента або компонента та вкажіть посилання на конкретний стиль з імпортованих стилів.
Максимально простий приклад:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;
Використання стилізованих компонентів
Ви коли-небудь використовували styled-компоненти? Це досить популярний інструмент, який дозволяє створювати кастомні компоненти, використовуючи CSS у вашому JavaScript коді. Стилізований компонент - це, по суті, React-компонент зі стилями - будьте готові до цього - стилями. Деякі з них включають унікальні імена класів, динамічну стилізацію та краще управління CSS, оскільки кожен компонент має власні окремі стилі.
Встановіть npm-пакет styled-components у командному рядку:
npm install styled-components
Далі імпортуйте його в застосунок React:
import styled from 'styled-components'
Створіть компонент і присвойте йому властивість зі стилем. Зверніть увагу на використання шаблонних літералів, позначених лапками в об'єкті Wrapper:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;
Наведений вище компонент Wrapper відобразиться як div, що містить ці стилі.
Умовні стилі
Однією з переваг компонентів зі стилями є те, що самі компоненти є функціональними, тобто ви можете використовувати пропси в межах CSS. Це відкриває двері для умовних операторів і зміни стилів на основі стану або пропсів.
Ось приклад, який це демонструє:
Тут ми маніпулюємо властивістю display для зміни відображення елеменда div. Цей стан контролюється кнопкою, яка перемикає стан div при натисканні. Це, в результаті, перемикає між стилями двох різних станів.
У вбудованих операторах if ми використовуємо знак ? замість звичайного синтаксису if/else. Частина else знаходиться після двокрапки. І не забувайте завжди викликати або використовувати стан після його ініціалізації. Наприклад, в останньому прикладі стан повинен бути над стилями компонента-обгортки.
Щасливого React-стайлінгу!
Ось і все, друзі! Ми розглянули декілька різних способів написання стилів у застосунку React. Не можна сказати, що один з них кращий за інший; звичайно, підхід, який ви використовуєте, залежить від ситуації. Сподіваємось, тепер ви добре їх розумієте і знаєте, що у вашому арсеналі для створення стилів React є безліч інструментів.
Ще немає коментарів