От автора: React — это библиотека для рендеринга пользовательского интерфейса, она не заботится о стилях. React – это хорошая вещь, но она также оставляет нас одних в большом океане с множеством возможностей.
Обычно выбрать систему стилей для приложения React не так сложно, как кажется. Также необязательно использовать все 10 способов, перечисленных в статье. Хорошо знать все доступные варианты, чтобы вы могли выбрать лучший в зависимости от ситуации.
Встроенный стиль
Таблицы стилей
Модуль CSS
CSS препроцессор
Стилизованные компоненты
React JSS
Radium
JSX Style
React Shadow
Утилитарные фреймворки
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, Яндекс.Дзен