Стилизация React с помощью CSS
Существует множество способов стилизации React с помощью CSS, в этом руководстве мы подробно рассмотрим три наиболее распространенных способа:
- Встроенный стиль
- CSS-таблицы стилей
- CSS-модули
Встроенный стиль
Чтобы стилизовать элемент с атрибутом встроенного стиля, значение должно быть объектом JavaScript:
Пример:
Вставьте объект с информацией о стиле:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Примечание. В JSX выражения JavaScript записываются внутри фигурных скобок, а поскольку объекты JavaScript также используют фигурные скобки, стиль в приведенном выше примере записывается внутри двух наборов фигурных скобок {{}}.
Верблюжьи имена свойств
Поскольку встроенный CSS написан в объекте JavaScript, свойства с дефисными разделителями, такие как background-color, должны быть написаны с синтаксисом верблюжьего регистра:
Пример:
Использовать backgroundColorвместо
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Объект JavaScript
Вы также можете создать объект с информацией о стиле и сослаться на него в атрибуте стиля:
Пример:
Создайте объект стиля с именем 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>
</>
);
}
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Таблица стилей CSS
Вы можете записать свой стиль CSS в отдельный файл, просто сохраните файл с
.cssрасширением файла и импортируйте его в свое приложение.
Приложение.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';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
CSS-модули
Другой способ добавления стилей в ваше приложение — использование модулей CSS.
CSS-модули удобны для компонентов, размещенных в отдельных файлах.
CSS внутри модуля доступен только для компонента, который его импортировал, и вам не нужно беспокоиться о конфликтах имен.
Создайте модуль CSS с .module.css
расширением, например: my-style.module.css.
Создайте новый файл с именем «my-style.module.css» и вставьте в него код CSS:
мой-стиль.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';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));