Стилизованные компоненты React: встроенные стили + 3 других подхода к стилизации CSS (с примерами) - UPROGER

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

Существует четыре различных способа стилизации приложения React, и в этом посте вы узнаете обо всех них. Начнем с встроенного стиля.

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

Компоненты React состоят из элементов JSX. Но то, что вы не пишете обычные HTML-элементы, не означает, что вы не можете использовать старый метод встроенного стиля.

Единственное отличие от JSX состоит в том, что встроенные стили должны быть записаны как объект, а не строка.

Вот простой пример:

import React from "react";

export default function App() {
  return (
      <h1 style={{ color: "red" }}>Hello World</h1>
  );
}

В приведенном выше атрибуте стиля первый набор фигурных скобок сообщит вашему парсеру JSX, что содержимое между скобками является JavaScript (а не строкой). Второй набор фигурных скобок инициализирует (активирует) объект JavaScript.

Имена свойств стиля, которые содержат более одного слова, записываются в camelCase вместо использования традиционного стиля с дефисами. Например, обычное text-align свойство нужно записать как textAlign в JSX:

import React from "react";

export default function App() {
  return (
      <h1 style={{ textAlign: "center" }}>Hello World</h1>
  );
}

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

import React from "react";

const pStyle = {
  fontSize: '16px',
  color: 'blue'
}

export default function App() {
  return (
      <p style={pStyle}>The weather is sunny with a small chance of rain today.</p>
  );
}

Если вам нужно расширить стиль абзаца дальше по строке, вы можете использовать оператор распространения объекта. Это позволит вам добавить встроенные стили к уже объявленному объекту стиля:

import React from "react";
const pStyle = {
  fontSize: "16px",
  color: "blue"
};
export default function App() {
  return (
    <>
      <p style={pStyle}>
        The weather is sunny with a small chance of rain today.
      </p>
      <p style={{ ...pStyle, color: "green", textAlign: "right" }}>
        When you go to work, don't forget to bring your umbrella with you!
      </p>
    </>
  );
}

Встроенные стили – это самый простой пример техники стилизации CSS в JS.

Одним из преимуществ использования встроенного стиля является то, что у вас будет простая техника стилизации, ориентированная на компоненты. Используя объект для стилизации, вы можете расширить свой стиль, распространив объект. Затем вы можете добавить к нему дополнительные свойства стиля, если хотите.

Но в большом и сложном проекте, где вам нужно управлять сотнями компонентов React, это может быть не лучшим выбором для вас.

Вы не можете указать псевдоклассы, используя встроенные стили. Это означает что :hover, :focus, :active или :visited не компонент.

Кроме того, вы не можете указывать медиа-запросы для адаптивного стиля. Давайте рассмотрим другой способ, чтобы стилизовать ваше приложение React.

Таблицы стилей CSS

Когда вы создаете приложение React using create-react-app, вы автоматически будете использовать webpack для импорта и обработки ресурсов.

Самое замечательное в webpack заключается в том, что, поскольку он обрабатывает ваши ресурсы, вы также можете использовать import синтаксис JavaScript для импорта .css файла в свой файл JavaScript. Затем вы можете использовать имя класса CSS в элементах JSX, которые хотите стилизовать, например:

.paragraph-text {
  font-size: 16px;
  color: 'blue';
}

import React, { Component } from 'react';
import './style.css';

export default function App() {
  return (
    <>
      <p className="paragraph-text">
        The weather is sunny with a small chance of rain today.
      </p>
    </>
  );
}

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

Используя этот подход, вы даже можете включить CSS-фреймворк, такой как Bootstrap, в свое приложение React. Все, что вам нужно, это импортировать файл CSS в корневой компонент.

Этот метод позволит вам использовать все функции CSS, включая псевдоклассы и медиа-запросы. Но недостатком использования таблицы стилей является то, что ваш стиль не будет локализован для вашего компонента.

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

Как и встроенные стили, использование таблиц стилей по-прежнему оставляет вам проблему поддержки и обновления CSS в большом проекте.

Модули CSS

Модуль CSS – это обычный файл CSS, в котором все имена классов и анимации по умолчанию ограничены локально.

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

Чтобы React знал, что вы используете модули CSS, назовите свой файл CSS, используя [name].module.css

Вот пример:

.BlueParagraph {
  color: blue;
  text-align: left;
}
.GreenParagraph {
  color: green;
  text-align: right;
}

import React from "react";
import styles from "./App.module.css";
export default function App() {
  return (
    <>
      <p className={styles.BlueParagraph}>
        The weather is sunny with a small chance of rain today.
      </p>
      <p className={styles.GreenParagraph}>
        When you go to work, don't forget to bring your umbrella with you!
      </p>
    </>
  );
}

Когда вы создаете свое приложение, webpack автоматически ищет файлы CSS с таким .module.css именем. Webpack возьмет эти имена классов и сопоставит их с новым, сгенерированным локализованным именем.

Вот песочница для приведенного выше примера. Если вы посмотрите на синий абзац, вы увидите, что класс элемента преобразован в _src_App_module__BlueParagraph.

Модули CSS обеспечивают локальную область видимости синтаксиса CSS.

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

.MediumParagraph {
  font-size: 20px;
}
.BlueParagraph {
  composes: MediumParagraph;
  color: blue;
  text-align: left;
}
.GreenParagraph {
  composes: MediumParagraph;
  color: green;
  text-align: right;
}

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

:global .HeaderParagraph {
  font-size: 30px;
  text-transform: uppercase;
}

Затем вы можете ссылаться на стиль с глобальной областью видимости, как на обычный класс, в своем файле JS:

<p className="HeaderParagraph">Weather Forecast</p>

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

Styled Components – это библиотека, разработанная для React и React Native. Он сочетает в себе методы CSS в JS и CSS-модули для стилизации ваших компонентов.

Вот пример:

import React from "react";
import styled from "styled-components";

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

export default function App() {
  return <Title>Hello World!</Title>;
}

Когда вы пишете свой стиль, вы фактически создаете компонент React со своим стилем, прикрепленным к нему. Забавно выглядящий синтаксис, styled.h1, за которым следует обратная кавычка, стал возможен благодаря использованию шаблонов тегированных литералов (template literals) JavaScript.

Стилизованные компоненты были созданы для решения следующих проблем:

Автоматический критический CSS : стилизованные компоненты отслеживают, какие компоненты отображаются на странице, и автоматически вводят их стили и ничего больше. В сочетании с разделением кода это означает, что ваши пользователи загружают наименьшее количество необходимого кода.
Нет ошибок в именах классов : стилизованные компоненты генерируют уникальные имена классов для ваших стилей. Вам никогда не придется беспокоиться о дублировании, наложении или неправильном написании.
Более легкое удаление CSS : может быть трудно узнать, используется ли уже имя класса где-нибудь в вашей кодовой базе. Styled-components делает это очевидным, поскольку каждый элемент стиля привязан к определенному компоненту. Если компонент не используется (который может обнаружить инструмент) и удаляется, все его стили удаляются вместе с ним.
Простое динамическое оформление : адаптация стиля компонента на основе его свойств или глобальной темы проста и интуитивно понятна, без необходимости вручную управлять десятками классов.
Безболезненное обслуживание : вам никогда не придется рыться в разных файлах, чтобы найти стиль, влияющий на ваш компонент, поэтому обслуживание – это кусок пирога, независимо от того, насколько велика ваша кодовая база.
Автоматическое добавление префиксов поставщика : напишите свой CSS в соответствии с текущим стандартом, а остальное пусть делают стилизованные компоненты.

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

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

Заключение

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

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