Использование стилей CSS в React

Существует несколько способов использования CSS в приложениях React.

Ниже приведены некоторые распространённые методы и подробные инструкции по их реализации в React.

Встроенные стили

В React использование CSS-стилей непосредственно на элементах достигается с помощью встроенных стилей.

Встроенные стили передают CSS-стили непосредственно в атрибут style элемента в виде объекта. Каждое свойство стиля записывается в camelCase вместо традиционного имени CSS-свойства.

Используйте непосредственно внутри элемента:

Пример

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Привет, стиль!</h1>
      <p>Добавьте немного стиля!</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Вы также можете создать объект с информацией о стиле и ссылаться на него в атрибуте style:

Пример

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  // Определите объект встроенного стиля
  const containerStyle = {
    padding: '20px',
    backgroundColor: '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Привет,, мир!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

В приведенном выше примере containerStyle и titleStyle — это два объекта встроенных стилей, примененных к элементам div и h1 соответственно. Вот ключевые моменты:

  • Используйте camelCase для CSS-свойств (например,backgroundColorвместоbackground-color）。
  • Все значения свойств стиля передаются в виде строк (кроме числовых значений, которые можно использовать напрямую, и React автоматически добавит единицы измерения).

Встроенные стили также могут динамически изменяться в зависимости от состояния компонента:

Пример

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const containerStyle = {
    padding: '20px',
    backgroundColor: isHighlighted ? '#ffff99' : '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Привет,, мир!</h1>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Переключить подсветку
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Использование файлов стилей

Вы можете писать CSS-стили в отдельном файле, просто используйте расширение файла.css, чтобы сохранить файл, а затем импортируйте его в свое приложение.

Создайте файл стилей с именем App.css и добавьте следующий CSS-код:

Пример

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

В вашем приложении импортируйте стиль App.css:

Пример

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Привет, стиль!</h1>
      <p>Добавьте немного стиля!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

CSS Modules

Ещё один способ добавить стили в приложение — использовать CSS Modules.

CSS Modules — это соглашение об именовании CSS-файлов с локальной областью видимости. При таком подходе имена CSS-классов и анимаций по умолчанию имеют локальную область видимости.

CSS Modules очень удобны для компонентов, размещённых в отдельных файлах.

Используйте расширение.module.cssдля создания CSS Modules, например: MyComponent.module.css.

Пример

/* MyComponent.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

Импортируйте таблицу стилей в приложение:

Пример

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Привет, мир!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);
Другие расширения