@jazmyne
Чтобы использовать CSS в React, есть несколько способов:
- Использование встроенных стилей (Inline styles):
React позволяет определять стили внутри JSX элемента с помощью встроенных стилей (Inline styles). Встроенные стили задаются в виде объекта JavaScript, в котором ключами являются имена свойств CSS, а значениями — их значения.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function MyComponent() {
const styles = {
backgroundColor: 'red',
color: 'white',
padding: '10px',
};
return (
<div style={styles}>
<h1>Hello, World!</h1>
</div>
);
}
|
- Использование CSS-файлов:
React также позволяет использовать обычные CSS-файлы, которые содержат описание стилей. Для этого нужно импортировать CSS-файл в компонент, и затем добавить соответствующий класс к элементам JSX.
1
2
3
4
5
6
7
8
9
|
import './MyComponent.css';
function MyComponent() {
return (
<div className="my-component">
<h1>Hello, World!</h1>
</div>
);
}
|
- Использование CSS-модулей:
CSS-модули позволяют создавать локальные имена классов для каждого компонента, чтобы избежать конфликтов имен. Для использования CSS-модулей, нужно создать CSS-файл с расширением .module.css, и затем импортировать его в компонент.
1
2
3
4
5
6
7
8
9
|
import styles from './MyComponent.module.css';
function MyComponent() {
return (
<div className={styles.myComponent}>
<h1>Hello, World!</h1>
</div>
);
}
|
Независимо от выбранного способа, стили в React работают так же, как и в обычном HTML и CSS.