React CSS Стили

Существует множество способов стилизации компонентов React с помощью CSS, и в данном руководстве мы подробно рассмотрим три наиболее распространенных способа:

Внутренняя стилизация
Внешние таблицы стилей
Модули CSS

Внутренняя стилизация

Чтобы оформить элемент с помощью атрибута стиля style, значение должно представлять собой объект JavaScript:

Пример

Вставляем объект с информацией о стилях:


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

Замечание: В JSX выражения JavaScript записываются в фигурных скобках. Поскольку объекты JavaScript также заключаются в фигурные скобки, стили записаны в примере выше дважды в двойных фигурных скобках {{}}.

Имена свойств в синтаксисе camelCase

Поскольку встроенный CSS записан внутри объекта JavaScript, свойства с дефисом, такие как background-color, должны записываться в синтаксисе camelCase:

Пример

Используйте запись backgroundColor вместо background-color:


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

Объект JavaScript

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

Пример

Создаем объект стиля под названием myStyle:


const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>Привет стилю!</h1>
      <p>Добавьте немного стиля!</p>
    </>
  );
};

Внешний файл стилей CSS

Можно писать CSS-код отдельно в файлах с расширением .css, а затем импортировать этот файл в приложение.

Пример

Создаем новый файл под названием "MyStylesheet.css" и вставляем туда CSS-код:


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

Замечание: Файл можно назвать любым именем, главное соблюдать правильное расширение файла.

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

Пример

Используем инструкцию import, чтобы импортировать таблицу стилей:


// index.js
import { createRoot } from 'react-dom/client';
import './MyStylesheet.css';

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

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

React распознаёт подключённые файлы с расширением .css, как таблицы стилей CSS.

Замечание: Стили будут применяться только к компоненту, который импортирует их.

Модули CSS

Ещё одним способом добавления стилей в приложение являются модули CSS.

Модули CSS удобны для компонентов, расположенных в отдельных файлах.

Модуль CSS доступен только для компонента, который его импортирует, и вам не придется беспокоиться о конфликтах именования.

Создайте модуль CSS с расширением .module.css, например, my-style.module.css.

Пример

Создаем новый файл под названием "my-style.module.css" и вставляем туда CSS-код:


/* my-style.module.css */
.bigred {
  color: Tomato;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

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

Пример

Используем инструкцию import styles, чтобы импортировать таблицу стилей:


// index.jsx
import { createRoot } from 'react-dom/client';
import styles from './my-style.module.css';

const Car = () => {
  return <h1 className={styles.bigred}>Привет машине!</h1>;
};

createRoot(document.getElementById('root')).render(<Car />);

Подробнее о модулях CSS будет рассказано в следующей главе.