React CSS-в-JS

CSS-в-JS — это техника стилизации, при которой вы можете писать CSS непосредственно в своем коде JavaScript.

Этот подход позволяет:

  • Писать CSS с использованием JavaScript
  • Создавать стили, привязанные к компонентам
  • Применять динамические стили на основе пропсов
  • Избегать конфликтов имён CSS-классов
В этом уроке мы будем использовать популярную библиотеку styled-components.

Начало работы

CSS-в-JS не входит в основную библиотеку React, но может быть установлен с помощью многих инструментов сборки React, таких как Vite, Webpack или Create React App.

Чтобы установить styled-components, выполните следующую команду:


npm install styled-components

Теперь вы можете писать CSS прямо в своих файлах .jsx:

Пример

Вставьте стили непосредственно в файл .jsx:


import styled from 'styled-components';

const MyHeader = styled.h1`
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
`;

function App() {
  return (
    <>
      <MyHeader>Добро пожаловать!</MyHeader>
    </>
  );
}

Без CSS-в-JS вам пришлось бы:

  • Писать CSS в отдельном файле .css и импортировать его в ваши компоненты React, либо
  • Использовать встроенные стили

Обратите внимание, что:

  • Мы используем объект styled для создания компонентов
  • Стили написаны внутри шаблонных строк (обратные апострофы)
  • Вы можете использовать обычный синтаксис CSS

Пропсы в CSS-в-JS

Еще одна мощная особенность CSS-в-JS — возможность использовать пропсы для создания динамических стилей.

Давайте создадим пример, в котором у нас есть две кнопки, одна первичная и одна вторичная.

Мы хотим задать фоновый цвет каждой кнопки на основании значения пропса btntype:

Пример


import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: ${props => props.btntype === 'primary' ? '#007bff' : '#6c757d'};
  color: white;
  cursor: pointer;
`;

function App() {
  return (
    <div>
      <Button btntype="primary">Первичная кнопка</Button><br /><br />
      <Button>Вторичная кнопка</Button>
    </div>
  );
}

Расширение стилей

Другой способ заставить несколько элементов иметь одинаковые стили — расширить существующие компоненты с использованием styled-components.

Например, мы можем создать PrimaryButton и SuccessButton, которые имеют тот же базовый стиль, что и стандартный компонент Button, но разные цвета фона:

Пример


import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
`;

const PrimaryButton = styled(Button)`
  background-color: #007bff;
`;

const SuccessButton = styled(Button)`
  background-color: #28a745;
`;

function App() {
  return (
    <div>
      <PrimaryButton>Основная</PrimaryButton>
      <SuccessButton>Успех</SuccessButton>
    </div>
  );
}

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

Так же, как и в модулях CSS, стили, созданные с помощью CSS-в-JS, относятся только к компоненту, в котором они определены.

Они получают уникальные имена и могут быть использованы только в компоненте, который их импортирует.

Если посмотреть исходный код страницы в приведённом выше примере, кнопки будут иметь уникальные имена классов, такие как bSOFjJ и pkxvl, ссылающиеся на соответствующие CSS-классы в секции стилей.

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

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

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

Пример


import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  h1 {
    color: white;
    background-color: purple;
    font-family: Arial, sans-serif;
  }

  .myparagraph {
    font-family: Courier, monospace;
    color: blue;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Добро пожаловать!</h1>
      <p className="myparagraph">Этот параграф оформлен с помощью глобальных стилей.</p>
    </>
  );
}

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

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