CSS в React

Как использовать CSS для стилизации приложения React

Используя React, у вас есть разные способы добавить стили к вашим компонентам.

Использование классов и CSS

Первый и самый простой - использовать классы и использовать обычный файл CSS для нацеливания на эти классы:

const Button = () => {
  return <button className="button">A button</button>
}

.button {
  background-color: yellow;
}

Вы можете импортировать таблицу стилей с помощью оператора импорта, например:

import './style.css'

иWebpackпозаботится о добавлении свойства CSS в пакет.

Использование атрибута стиля

Второй метод - использоватьstyleатрибут, прикрепленный к элементу JSX. При таком подходе вам не нужен отдельный файл CSS.

const Button = () => {
  return <button style={{ backgroundColor: 'yellow' }}>A button</button>
}

CSS теперь определяется немного по-другому. Во-первых, обратите внимание на двойные фигурные скобки: это потому, чтоstyleпринимает объект. Мы передаем объект JavaScript, который определен в фигурных скобках. Мы также можем сделать это:

const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
  return <button style={buttonStyle}>A button</button>
}

Когда используешьcreate-react-app, эти стили имеют автоматические префиксы по умолчанию благодаря использованиюАвтоприставка.

Кроме того, теперь стиль имеет camelCased вместо тире. Каждый раз, когда свойство CSS имеет тире, удалите его и начинайте следующее слово с заглавной буквы.

Преимущество стилей заключается в том, что они являются локальными по отношению к компоненту, и они не могут проникать в другие компоненты в других частях приложения, чего не может обеспечить использование классов и внешнего файла CSS.

Использование модулей CSS

Модули CSSкажется идеальным местом посередине: вы используете классы, но CSS привязан к компоненту, а это означает, что любой добавленный вами стиль не может быть применен к другим компонентам без вашего разрешения. И все же ваши стили определены в отдельном файле CSS, который легче поддерживать, чем CSS в JavaScript (и вы можете использовать свои старые добрые имена свойств CSS).

Начните с создания файла CSS, который заканчивается на.module.css, НапримерButton.module.css. Отличный выбор - дать ему то же имя, что и компонент, который вы собираетесь стилизовать.

Добавьте сюда свой CSS, а затем импортируйте его в файл компонента, который хотите стилизовать:

import style from './Button.module.css'

теперь вы можете использовать его в своем JSX:

const Button = () => {
  return <button className={style.content}>A button</button>
}

Вот и все! В результирующей разметке React сгенерирует конкретный уникальный класс для каждого визуализированного компонента и назначит CSS этому классу, чтобы CSS не влиял на другую разметку.

CSS Modules in React

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции:


Tech Wiki Online!