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

От автора: React — это библиотека для рендеринга пользовательского интерфейса, она не заботится о стилях. React – это хорошая вещь, но она также оставляет нас одних в большом океане с множеством возможностей.

Обычно выбрать систему стилей для приложения React не так сложно, как кажется. Также необязательно использовать все 10 способов, перечисленных в статье. Хорошо знать все доступные варианты, чтобы вы могли выбрать лучший в зависимости от ситуации.

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

Встроенный CSS такой же, как и обычный стиль тегов.

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;

2. Таблицы стилей

Таблицы стилей очень распространены в экосистеме 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;

3. Модули CSS

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

Create-React-App имеет встроенную поддержку модулей CSS. Модуль CSS позволяет нам использовать одно и то же имя класса с файлами, не беспокоясь о конфликте имен 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"; // Import css modules stylesheet as styles
import "./another-stylesheet.css"; // Import regular stylesheet const Homepage = () => { return ( <div className={styles.homepage}> <h1>Welcome to React</h1> <p>This is a simple homepage</p> </div> );
}; export default Homepage;

4. Препроцессор CSS

Мы можем использовать SASS, SCSS, LESS, STYLUS и т.д., используя WebPack загрузчик. Но, к сожалению, ни один из них не поддерживается по умолчанию в CRA. Мы можем использовать SCSS или SASS установив node-sass.

npm і node-sass

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

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

Вместо того, чтобы писать CSS как JS, стилизованный компонент позволяет нам писать фактический CSS.

Установите стилизованный компонент через npm:

npm i styled-components

Давайте создадим тот же стиль, используя styled-componets.

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-Component использует тегированные шаблонные литералы для создания стилей.

6. React JSS

С JSS можна создавать CSS с помощью Javascript декларативным, бесконфликтным и многоразовым способом.

Установите response-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 = () => {
// Use Styles const classes = useStyles(); return ( <div className={classes.container}> <h1>Welcome to React</h1> <p>This is a simple homepage</p> </div> );
}; export default Homepage;

7. Radium

Radium — это набор инструментов для создания встроенных стилей с использованием javascript.

По умолчанию react не поддерживает встроенный стиль с псевдоселекторами, такими как :hover, :focus и т. д. Установите radium, используя npm.

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);

8. React Shadow

React Shadow позволяет нам создавать Shadow DOM в React со всеми преимуществами инкапсуляции стилей.

Установите Reach 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;

9. JSX Style

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

Установите jsxstyle, используя npm.

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;

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

Утилитарные фреймворки созданы, чтобы избежать создания таблицы стилей. Самый известный утилитарный фреймворк — tailwindcss.

CRA изначально не поддерживает tailwindcss, нам нужно использовать некоторое переопределение CRA, например 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;

Надеюсь, вам понравится эта статья.

Автор: Naveen DA

Источник: javascript.plainenglish.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен