Ми всі знайомі зі стандартним способом зв'язування таблиці стилів до <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 клас, а інший для введення тексту, які містять правила стилів, подібні до тих, які ми очікуємо побачити у зовнішній таблиці стилів. Потім ці об’єкти застосовуються до style атрибут елементів, які знаходяться у повернутій розмітці.
Зауважте, що фігурні дужки використовуються для посилань на стилі, а не лапки, які ми зазвичай використовуємо в звичайному HTML.
Використовуйте модулі CSS
Модулі CSS... що з ними трапилося, чи не так? Вони мають переваги локальних змінних і можуть використовуватися разом із React. Але які вони, знову ж таки, насправді?
Цитуючи документація репо:
CSS Modules працює шляхом компіляції окремих файлів 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-components
Ви звикли стилізовані компоненти? Він досить популярний і дозволяє створювати власні компоненти, використовуючи фактичний CSS у вашому JavaScript. Стилізований компонент — це в основному компонент React зі стилями — будьте готові до цього. Деякі функції включають унікальні назви класів, динамічне оформлення та краще керування CSS, оскільки кожен компонент має власні окремі стилі.
Встановіть пакет styled-components npm у командному рядку:
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, що містить ці стилі.
Умовний стиль
Однією з переваг styled-components є те, що самі компоненти є функціональними, оскільки ви можете використовувати props в CSS. Це відкриває двері для умовних операторів і зміни стилів на основі стану або параметра.
Ось демо, що демонструє це:
Тут ми маніпулюємо div display властивість у стані відображення. Цим станом керує кнопка, яка перемикає стан div при натисканні. Це, у свою чергу, перемикається між стилями двох різних держав.
У вбудованому if висловлювання ми використовуємо a ? замість звичного if/else синтаксис. Файл else частина стоїть після крапки з комою. І не забувайте завжди викликати або використовувати стан після його ініціалізації. Наприклад, в останньому демо-версії стан має бути вище Wrapper стилі компонента.
Щасливий стиль React!
Це обгортка, люди! Ми розглянули кілька різних способів написання стилів у програмі React. І це не так, щоб один кращий за інших; підхід, який ви використовуєте, залежить від ситуації, звичайно. Сподіваюся, тепер ви добре розумієте їх і знаєте, що у вашому арсеналі стилів React є купа інструментів.
