Стилізація React за допомогою CSS
Існує багато способів стилізації React за допомогою CSS, у цьому підручнику детальніше розглянемо три поширені способи:
- Вбудований стиль
- Таблиці стилів CSS
- Модулі CSS
Вбудований стиль
Щоб стилізувати елемент за допомогою вбудованого атрибута style, значення має бути об’єктом JavaScript:
Приклад:
Вставте об’єкт із інформацією про стиль:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Примітка: У JSX вирази JavaScript записуються у фігурних дужках, а оскільки об’єкти JavaScript також використовують фігурні дужки, стиль у наведеному вище прикладі записується всередині двох наборів фігурних дужок. {{}}.
camelCased Назви властивостей
Оскільки вбудований CSS записується в об’єкті JavaScript, властивості з роздільниками дефісів, як-от background-color, мають бути записані з синтаксисом верблюжого регістру:
Приклад:
Використовуйте backgroundColor замість background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript Об’єкт
Ви також можете створити об’єкт із інформацією про стиль і посилатися на нього в атрибуті style:
Приклад:
Створіть об’єкт стилю під назвою myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Таблиця стилів CSS
Ви можете записати свій стиль CSS в окремому файлі, просто збережіть файл із розширенням .css та імпортуйте його у свою програму.
App.css:
Створіть новий файл під назвою "App.css" і вставте в нього код CSS:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Примітка: Ви можете назвати файл як завгодно, просто запам’ятайте правильне розширення файлу.
Імпортуйте таблицю стилів у свою програму:
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
CSS Модулі
Іншим способом додавання стилів до вашої програми є використання модулів CSS.
Модулі CSS зручні для компонентів, розміщених в окремих файлах.
CSS усередині модуля доступний лише для компонента, який його імпортував, і вам не потрібно турбуватися про конфлікти імен.
Створіть модуль CSS із розширенням .module.css, приклад: my-style.module.css.
Створіть новий файл під назвою "my-style.module.css" і вставте в нього код CSS:
my-style.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Імпортуйте таблицю стилів у свій компонент:
Car.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Імпортуйте компонент у свою програму:
index.js:
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
