Как стилизовать компоненты React с помощью CSS

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

Содержание

Встроенный стиль
Преимущества
Недостатки
Внутристраничные стили
Глобальные стили
Преимущества
Недостатки
Модули CSS
Преимущества
Недостатки
Стилевые компоненты
Emotion
Поддержка SASS
Другие библиотеки
Исходный код и демонстрация

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

Если вы хотите быстро добавить стиль, вы можете воспользоваться реквизитом style для передачи стилей элементу, как показано ниже:

import React from "react"

const InlineStyle = () => {
  return (
    <div>
      <button
        style={{
          backgroundColor: "#0ea5e9",
          border: "none",
          color: "white",
          borderRadius: "0.5rem",
          padding: "0.5rem 1rem",
          cursor: "pointer",
        }}
      >
        Hover Me
      </button>
      <p
        style={{
          color: "green",
          background: "lightGreen",
          padding: "0.5rem 1rem",
        }}
      >
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
        exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
        dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
        illum magnam aspernatur?
      </p>
    </div>
  )
}

export default InlineStyle

Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, мы должны передать стили в объекте JavaScript в реквизит style.
Демонстрацию использования встроенных стилей можно посмотреть здесь.

Преимущества

При использовании встроенных стилей нам не нужно создавать отдельный css файл и переключаться между css и файлом компонента при применении стилей.

Недостатки

Как вы могли видеть в демонстрации, при наведении курсора на кнопку ничего не происходит.
Это происходит потому, что при использовании инлайн-стилей вы не сможете добавить псевдоселекторы, такие как :hover, :focus и т.д..
Это требует написания css в формате js, что многим людям, привыкшим писать css традиционным способом, может не понравиться.
Мы не можем повторно использовать стили или селекторы, что делает код длинным и не поддерживаемым.

Внутристраничные стили

Внутристраничные стили — это не что иное, как встроенные стили, извлеченные в отдельный объект JavaScript:

import React from "react"

const InPageStyle = () => {
  return (
    <div>
      <button style={styles.button}>Hover Me</button>
      <p style={styles.paragraph}>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
        exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
        dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
        illum magnam aspernatur?
      </p>
    </div>
  )
}

const styles = {
  button: {
    backgroundColor: "#0ea5e9",
    border: "none",
    color: "white",
    borderRadius: "0.5rem",
    padding: "0.5rem 1rem",
    cursor: "pointer",
  },
  paragraph: {
    color: "green",
    background: "lightGreen",
    padding: "0.5rem 1rem",
  },
}

export default InPageStyle

Вход в полноэкранный режим Выход из полноэкранного режима

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

Глобальные стили

Глобальные стили — это традиционный способ иметь css-файл, содержащий все стили, относящиеся ко всему приложению.

Чтобы использовать глобальные стили, создайте css-файл с именем global.css, как показано ниже:

.button {
  background-color: #0ea5e9;
  border: none;
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.button:hover {
  background-color: rgb(37, 99, 235);
}
.paragraph {
  color: green;
  background: lightGreen;
  padding: 0.5rem 1rem;
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь включите global.css в самый верхний компонент вашего проекта:

import React from "react"
import "./global.css"

const GlobalStyle = () => {
  return (
    <div>
      <button className="button">Hover Me</button>
      <p className="paragraph">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
        exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
        dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
        illum magnam aspernatur?
      </p>
      <button className="button">Hover Me</button>
    </div>
  )
}

export default GlobalStyle

Войти в полноэкранный режим Выйти из полноэкранного режима

Преимущества

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

Недостатки

Поскольку все стили хранятся в одном css-файле, если над проектом работают несколько человек, это может привести как к конфликту кода, так и к конфликту стилей.

Create react app поставляется с дефолтным index.css, который является примером глобальной стилизации css.

Вы можете посмотреть демонстрацию глобального css здесь.

Модули CSS

CSS Modules — это способ иметь отдельные css стили для каждого модуля.
Давайте разделим кнопки и абзацы на разные компоненты.

import React from "react"
import styles from "./ButtonOne.module.css" // Import css modules stylesheet as styles

const ButtonOne = () => {
  return (
    <div>
      <button className={styles.button}>Hover Me</button>
    </div>
  )
}

export default ButtonOne

Вход в полноэкранный режим Выход из полноэкранного режима

import React from "react"
import styles from "./ButtonTwo.module.css" // Import css modules stylesheet as styles

const ButtonTwo = () => {
  return (
    <div>
      <button className={styles.button}>Hover Me</button>
    </div>
  )
}

export default ButtonTwo

Войти в полноэкранный режим Выход из полноэкранного режима

import React from "react"
import styles from "./Paragraph.module.css" // Import css modules stylesheet as styles

const Paragraph = () => {
  return (
    <div>
      <p className={styles.paragraph}>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
        exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
        dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
        illum magnam aspernatur?
      </p>
    </div>
  )
}

export default Paragraph

Войти в полноэкранный режим Выход из полноэкранного режима

Теперь добавим стили для всех трех компонентов:

.button {
  background-color: #0ea5e9;
  border: none;
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.button:hover {
  background-color: rgb(37, 99, 235);
}

Вход в полноэкранный режим Выход из полноэкранного режима

.button {
  background-color: rgb(239, 68, 68);
  border: none;
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.button:hover {
  background-color: rgb(185, 28, 28);
}

Войти в полноэкранный режим Выход из полноэкранного режима

.paragraph {
  color: green;
  background: lightGreen;
  padding: 0.5rem 1rem;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Наконец, давайте включим все компоненты в наше приложение:

import React from "react"
import ButtonOne from "./ButtonOne"
import ButtonTwo from "./ButtonTwo"
import Paragraph from "./Paragraph"

const CssModules = () => {
  return (
    <div>
      <ButtonOne />
      <Paragraph />
      <ButtonTwo />
    </div>
  )
}

export default CssModules

Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы посмотрите демо-страницу, то заметите, что классы названы в формате <ComponentName>_<ClassName>_<RandomString>.
Это сделано для того, чтобы избежать конфликтов между модулями css.

Преимущества

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

Недостатки

Если один и тот же стиль используется во всех модулях, возможно дублирование кода (что можно решить путем переноса общих стилей в глобальную таблицу стилей).

До сих пор мы рассматривали методы, поддерживаемые в react по умолчанию. Теперь мы рассмотрим некоторые сторонние библиотеки, которые помогают в стилизации приложения.

Стилевые компоненты

Styled Components помогает в определении стилей компонента путем передачи фактического css с помощью литералов шаблона (обратных галочек), как показано ниже:

const Button = styled.button`
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь нам просто нужно включить компонент Button везде, где он необходим.

Чтобы использовать стилизованные компоненты, нам нужно сначала установить их (вы можете использовать npm i styled-components, если хотите):

yarn add styled-components

Вход в полноэкранный режим Выход из полноэкранного режима

Рассмотрим следующий код:

import React from "react"
import styled, { css } from "styled-components"

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
  cursor: pointer;

  ${props =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
    `}
`

const Paragraph = styled.p`
  color: green;
  background: lightGreen;
  padding: 0.5rem 1rem;
`

const StyledComponents = () => {
  return (
    <div>
      <Button>Normal Button</Button>
      <Paragraph>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
        exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
        dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
        illum magnam aspernatur?
      </Paragraph>
      <Button primary>Primary Button</Button>
    </div>
  )
}

export default StyledComponents

Войти в полноэкранный режим Выйти из полноэкранного режима

Стилизованный компонент может получать реквизиты и затем применять различные стили, если этот реквизит соответствует какому-то условию.
Как в нашем случае, мы изменяем цвет и фон кнопки, если реквизит primary имеет значение true.

Демонстрацию приведенного выше кода можно найти здесь.

Мы также можем расширить существующий стиль, как показано ниже:

const Button = styled.button`
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`
const EnhancedButton = styled(Button)`
  :hover {
    color: red;
  }
`

Вход в полноэкранный режим Выход из полноэкранного режима

EnhancedButton получит все стили из компонента Button и стили, определенные им самим.

Emotion

Emotion — это альтернатива стилизованным компонентам.
Мы можем установить emotion в React, выполнив следующую команду:

yarn add @emotion/react

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы можем использовать эмоцию в нашем приложении:

/** @jsxRuntime classic */
// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from "@emotion/react"

const color = "white"

const Emotion = () => {
  return (
    <div>
      <button
        css={css`
          margin: 0.5em 1em;
          padding: 0.25em 1em;
          cursor: pointer;
          background-color: hotpink;
          font-size: 24px;
          border-radius: 4px;
          border: none;
          &:hover {
            color: ${color};
          }
        `}
      >
        Hover Me
      </button>
      <p
        css={css`
          color: green;
          background: lightGreen;
          padding: 0.5rem 1rem;
        `}
      >
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea ab
        exercitationem soluta, consequatur obcaecati suscipit numquam dolorem,
        dignissimos quas nobis error repellat minus sed accusamus placeat, rerum
        illum magnam aspernatur?
      </p>
    </div>
  )
}

export default Emotion

Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы видите, это немного похоже на стилизованные компоненты, которые используют синтаксис обратного нажатия.

На самом деле, существует пакет @emotion/styled,
который помогает писать css в стиле стилизованных компонентов!

Демонстрацию приведенного выше кода можно найти здесь.

Поддержка SASS

Если вы хотите использовать SCSS в своем приложении, то вы можете сделать это, установив node-sass:

yarn add node-sass@4.14.1

Вход в полноэкранный режим Выйдите из полноэкранного режима

Теперь создайте файл с именем styles.scss со следующим содержимым:

$myColor: purple;

h2 {
  color: $myColor;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Затем используйте его в компоненте, импортировав его:

import React from "react"
import "./styles.scss"

const Sass = () => {
  return (
    <div>
      <h2>Styling using SASS</h2>
    </div>
  )
}

export default Sass

Войти в полноэкранный режим Выйти из полноэкранного режима

Другие библиотеки

Существуют и другие библиотеки, такие как tailwind, и библиотеки компонентов, такие как Semantic UI, React Bootstrap, Ant Design, Chakra UI, BluePrint, Material UI и т.д., которые вы можете попробовать.

Исходный код и демонстрация

Вы можете просмотреть полный исходный код здесь, а демо-версию здесь.