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

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

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

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

• Инлайн-стили
• Внешние таблицы стилей
• CSS-модули
• CSS-препроцессоры
• Styled Components
• React JSS
• Radium
• React Shadow
• JSX Style
• Утилитарные фреймворки

https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3389773486006292&output=html&h=200&slotname=8843408867&adk=3924738165&adf=1963604200&pi=t.ma~as.8843408867&w=800&fwrn=4&lmt=1643200120&rafmt=11&psa=0&format=800×200&url=https%3A%2F%2Fwww.cat-in-web.ru%2F10-ways-to-style-react%2F&flash=0&wgl=1&dt=1643200118403&bpp=5&bdt=2073&idt=1720&shv=r20220120&mjsv=m202201200301&ptt=9&saldr=aa&abxe=1&cookie=ID%3D0d6c0d219a85328b-22193e2a2bcd00a6%3AT%3D1643200119%3ART%3D1643200119%3AS%3DALNI_MZ2Rz4BN2gsvkZczKlsUjU90E7JZQ&prev_fmts=0x0&nras=1&correlator=8339627054712&frm=20&pv=1&ga_vid=1940207896.1643200119&ga_sid=1643200119&ga_hid=302349790&ga_fc=0&rplot=4&u_tz=120&u_his=1&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_sd=1&adx=275&ady=1231&biw=1349&bih=615&scr_x=0&scr_y=0&eid=31063751%2C44750773%2C44753738&oid=2&pvsid=3189944067120871&pem=337&tmod=343638592&nvt=1&eae=0&fc=1920&brdim=-8%2C-8%2C-8%2C-8%2C1366%2C0%2C1382%2C744%2C1366%2C615&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=2&uci=a!2&btvi=1&fsb=1&xpc=pNLYcX64Lh&p=https%3A//www.cat-in-web.ru&dtd=1749

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

Инлайн-стили указываются прямо на самом 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;

https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3389773486006292&output=html&h=200&slotname=8843408867&adk=3924738165&adf=294386551&pi=t.ma~as.8843408867&w=800&fwrn=4&lmt=1643200146&rafmt=11&psa=0&format=800×200&url=https%3A%2F%2Fwww.cat-in-web.ru%2F10-ways-to-style-react%2F&flash=0&wgl=1&dt=1643200118408&bpp=18&bdt=2078&idt=1772&shv=r20220120&mjsv=m202201200301&ptt=9&saldr=aa&abxe=1&cookie=ID%3D0d6c0d219a85328b-22193e2a2bcd00a6%3AT%3D1643200119%3ART%3D1643200119%3AS%3DALNI_MZ2Rz4BN2gsvkZczKlsUjU90E7JZQ&prev_fmts=0x0%2C800x200&nras=1&correlator=8339627054712&frm=20&pv=1&ga_vid=1940207896.1643200119&ga_sid=1643200119&ga_hid=302349790&ga_fc=0&rplot=4&u_tz=120&u_his=1&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_sd=1&adx=275&ady=5171&biw=1349&bih=615&scr_x=0&scr_y=2719&eid=31063751%2C44750773%2C44753738&oid=2&psts=AGkb-H8h2T3dSs2dXKxiatwofrgO48yyREzrQb9QOnaUt9HrL2h1zOnCXCBcMYhFda9YQbarsxkMalzmB9-jLQ&pvsid=3189944067120871&pem=337&tmod=343638592&nvt=1&eae=0&fc=1920&brdim=-8%2C-8%2C-8%2C-8%2C1366%2C0%2C1382%2C744%2C1366%2C615&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=3&uci=a!3&btvi=2&fsb=1&xpc=dq0RaGu2HH&p=https%3A//www.cat-in-web.ru&dtd=28308

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.https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3389773486006292&output=html&h=200&slotname=8843408867&adk=3924738165&adf=2078417877&pi=t.ma~as.8843408867&w=800&fwrn=4&lmt=1643200150&rafmt=11&psa=0&format=800×200&url=https%3A%2F%2Fwww.cat-in-web.ru%2F10-ways-to-style-react%2F&flash=0&wgl=1&dt=1643200118426&bpp=5&bdt=2095&idt=1763&shv=r20220120&mjsv=m202201200301&ptt=9&saldr=aa&abxe=1&cookie=ID%3D0d6c0d219a85328b-22193e2a2bcd00a6%3AT%3D1643200119%3ART%3D1643200119%3AS%3DALNI_MZ2Rz4BN2gsvkZczKlsUjU90E7JZQ&prev_fmts=0x0%2C800x200%2C800x200&nras=1&correlator=8339627054712&frm=20&pv=1&ga_vid=1940207896.1643200119&ga_sid=1643200119&ga_hid=302349790&ga_fc=0&rplot=4&u_tz=120&u_his=1&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_sd=1&adx=275&ady=9985&biw=1349&bih=615&scr_x=0&scr_y=7555&eid=31063751%2C44750773%2C44753738&oid=2&psts=AGkb-H8h2T3dSs2dXKxiatwofrgO48yyREzrQb9QOnaUt9HrL2h1zOnCXCBcMYhFda9YQbarsxkMalzmB9-jLQ%2CAGkb-H9wrUkW-y2B9jUAmaFjaSL1bknfv0tRLDEdKSpjw0IV3JbATxmDQAGsODAs1g4WW8kkKoxpIUhNlHOx7w&pvsid=3189944067120871&pem=337&tmod=343638592&nvt=1&eae=0&fc=1920&brdim=-8%2C-8%2C-8%2C-8%2C1366%2C0%2C1382%2C744%2C1366%2C615&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=4&uci=a!4&btvi=3&fsb=1&xpc=LmEirREU2q&p=https%3A//www.cat-in-web.ru&dtd=32278

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.

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

import React from "react";

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

export default Homepage;

---

Какой способ стилизации React-приложений используете вы?