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

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

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

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

Модуль CSS

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

CSS препроцессор

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

React JSS

Radium

JSX Style

React Shadow

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

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

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

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

1234567891011121314151617

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, и это круто. Единственная проблема в том, что изолировать стили от другого компонента довольно сложно. Мы создаем обычные таблицы стилей и импортируем их в ваши компоненты.

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

12345

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

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

12345678910111213

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 в двух разных файлах.

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

12345

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

Если у нас такое же имя класса в другом файле.

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

12345

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

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

1234567891011121314

import React from “react”;import styles from “./homepage.module.css”; // Import css modules stylesheet as stylesimport “./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.

JavaScript npm і node-sass

1	npm і node-sass

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

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

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

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

JavaScript npm i styled-components

1	npm i styled-components

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

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

123456789101112131415161718

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.

JavaScript npm i react-jss

1	npm i react-jss

Затем создайте стиль, используя createUseStyles.

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

123456789101112131415161718192021222324252627

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.

JavaScript npm i radium

1	npm i radium

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

123456789101112131415161718192021

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.

JavaScript npm i react-shadow

1	npm i react-shadow

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

1234567891011121314151617

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.

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

12345678910111213141516

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. Для получения дополнительной информации, пожалуйста, ознакомьтесь с официальной документацией.

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

123456789101112

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

Источник: webformyself.com