10 способов стилизации React-приложений

Оригинал: 10 Ways to Style a React Application, автор Naveen DA

React — это библиотека для создания пользовательских интерфейсов, она не имеет собственного подхода к стилизации. Это и хорошо, и плохо одновременно. Разработчик может выбрать любой способ, однако сделать этот выбор совсем непросто.

В этой статье мы разберем 10 различных способов добавления стилей в React-приложение:

Инлайн-стили

Инлайн-стили указываются прямо на самом DOM-элементе в атрибуте style. Мы можем передавать их в JSX в виде объекта, что удобнее, чем перечисление в строке через точку с запятой.

import React from "react";

const container = {
    padding: 12,
    background: 'red'
}

const Homepage = () => {
  return (
    <div style={container}>
      <h1>Welcome to React</h1>
      <p>This is a simple homepage</p>
    </div>
  );
};

export default Homepage;

Внешние таблицы стилей

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

Создаем обычную таблицу стилей:

.container{
  width: 100%;
  padding: 12px;
  background: red;
}

И импортируем ее в компонент:


import React from "react";
import "homepage.css";

const Homepage = () => {
  return (
    <div className="container">
      <h1>Welcome to React</h1>
      <p>This is a simple homepage</p>
    </div>
  );
};


export default Homepage;

Утилита create-react-app также добавляет PostCSS-обработку стилей.

CSS-модули

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

Create-react-app поддерживает работу с CSS-модулями.

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

// homepage.module.css
.container{
  padding:12px;
  background:red;
}

// contactpage.module.css
.container{
  padding: 12px;
  background:green;
}

Импортируем нужный файл в компоненте:

import React from "react";
import styles from "./homepage.module.css"; // Импорт CSS-модуля
import "./another-stylesheet.css"; // Импорт обычного файла стилей

 const Homepage = () => {
  return (
    <div className={styles.homepage}>
      <h1>Welcome to React</h1>
      <p>This is a simple homepage</p>
    </div>
  );
};

export default Homepage;

CSS-препроцессоры

Мы можем использовать Sass, Scss, Less, Stylus и другие препроцессоры CSS в React-приложениях, используя специальные лоадеры для Webpack. К сожалению, они не поддерживаются в Create-react-app из коробки.

Например, чтобы использовать Scss или Sass нам нужно установить node-sass:

npm i node-sass

Более подробная информация — в официальной документации.

Styled Components

Пакет styled-component позволяет писать стили как обычный CSS-код, пользуясь при этом всеми преимуществами JS.

Перед началом работы нужно установить npm-модуль:

npm i styled-components

Стили создаются прямо в файле компонента:


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

const Container =  styled.div`
    padding: 12px;
    background: red;
`;

 const Homepage = () => {
  return (
    <Container>
      <h1>Welcome to React</h1>
      <p>This is a simple homepage</p>
    </Container>
  );
};

export default Homepage;

Styled-Components использует синтаксис шаблонных строк, а точнее теговые шаблоны, для создания стилей.

React JSS

JSS позволяет писать CSS прямо в JS декларативно, без конфликтов и с возможностью переиспользования.

Установите react-jss с помощью npm:

npm i react-jss

Стили создаются с помощью функции createUseStyles:

import React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  container: {
    padding: "20px",
    backgroundColor: "red"
  },
  button: {
    backgroundColor: "green",
    color: "white"
  }
});

const Homepage = () => {

 const classes = useStyles();

  return (
    <div className={classes.container}>
      <h1>Welcome to React</h1>
      <p>This is a simple homepage</p>
    </div>
  );
};

export default Homepage;

Для применения стилей используйте хук useStyles.

Radium

Radium — это набор инструментов для создания инлайновых стилей с помощью JavaScript. Radium использует tree-shaking для удаления неиспользуемого кода.

JavaScript не дает возможности использовать псевдоселекторы вроде :hover, :focus и т. д. Radium решает эту проблему.

Сначала установите модуль radium:

npm i radium

А затем просто пишите нужные стили:

import React from "react";
import Radium from 'radium';

const Homepage = () => {
 const style = {
     padding:"12px",
     background:'red',
     ":hover":{
         background:'blue'
     }
 }

  return (
    <div style={style}>
      <h1>Welcome to React</h1>
      <p>This is a simple homepage</p>
    </div>
  );
};

export default Radium(Homepage);

Перед экспортом оберните ваш компонент в декоратор Radium.

React Shadow

React Shadow создает теневой DOM (Shadow DOM), что дает возможность использовать все плюшки инкапсуляции стилей.

Установка React Shadow из npm:

npm i react-shadow

Использование в компоненте:

import React from "react";
import root from "react-shadow";
import styles from "homepage.css";

const Homepage = () => {
  return (
    <root.div>
      <div className="container">
        <h1>Welcome to React</h1>
        <p>This is a simple homepage</p>
      </div>
      <style type="text/css">{styles}</style>
    </root.div>
  );
};

export default Homepage;

JSX Style

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

Импорт jsxstyle из npm:

npm i jsxstyle

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

import React from "react";
import { Block } from "jsxstyle";

const Homepage = () => {
  return (
    <Block 
    padding={20} 
    backgroundColor="#f5f5f5" 
    borderRadius={5}>
      <h1>Welcome to React</h1>
      <p>This is a simple homepage</p>
    </Block>
  );
};

export default Homepage;

Утилитарные фреймворки

Утилитарные CSS-фреймворки предназначены для того, чтобы писать стили без CSS. Самый известный из них — tailwindcss.

Create-react-app не поддерживает tailwindcss из коробки, поэтому нам нужно использовать расширенные версии этой утилиты, например, CRACO.