Close

26 августа, 2021

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

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

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.

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

Установите стилизованный компонент через 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 декларативным, бесконфликтным и многоразовым способом.

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

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

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

По умолчанию 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 со всеми преимуществами инкапсуляции стилей.

10 способов стилизовать приложение на 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. Она обеспечивает лучший в опыт разработки без ущерба для производительности.

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

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

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

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

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?