Главная » Статьи » 4 популярных способа стилизации компонентов React

4 популярных способа стилизации компонентов React

4 популярных способа стилизации компонентов React

От автора: ваши приложения React — это просто набор компонентов, собранных вместе для создания пользовательских интерфейсов и функций. Конечно, вы не хотите оставлять в своем приложении стерильные цвета, анимацию и стили. Вот почему вы должны заботиться о том, как планируете настраивать и улучшать компоненты React.

Далее вы найдете список 4 самых распространенных способа сделать приложения React красивыми. Но, пожалуйста, будь осторожны. Потому что каждое кодовое решение несет с собой бремя выбора.

Поэтому вы должны быть очень осторожны в отношении того, что выберете, исходя из того, что вам нужно, ваших целей и масштабов приложения.

Inline-Styling

Удобный, быстрый в использовании режим для стилизации компонентов React. В этом случае, в отличие от того, что вы, возможно, видели в HTML, вам придется указывать объект, содержащий правила, вместо простой строки. И затем предоставьте это свойству под названием style.

import React from "react"; export default function App() { return ( <div style={{marginLeft: '20px', color: 'red'}}> <h1>Hello Medium</h1> </div> );
}

Обратите внимание на две вещи:

Правила, которые вы обычно определяете с помощью тире, margin-left, в этом случае должны быть определены с использованием camelCase.

Значения различных стилей выражены в виде строк.

Не обязательно определять все стили встроенными. Вы можете, например, создать объект, содержащий правила, а затем использовать его позже, даже несколько раз.

import React from "react"; export default function App() { const styles = { marginLeft: '20px', color: 'red' } return ( <div style={styles}> <h1>Hello Medium</h1> </div> );
}

Плюсы: быстрый и простой в использовании способ. Особенно хорошо для супер-малых корректировок, таких как поля или отступы.

Минусы: совсем не приспособлен для больших производственных сред. Отсутствует поддержка медиа-запросов, псевдо-классов и, как правило, сбивает динамические стили и большие компоненты.

CSS Модули

Простота этой концепции поражает:

Каждый компонент React получает файл CSS, который является локальным для этого компонента. Имена, определенные в этих файлах CSS, во время выполнения сопоставляются с автоматически генерируемыми и экспортируются как литерал объекта JS, который вы можете использовать.

/* styles.css */
.header { margin-left: 20px; color: red;
} /* App.jsx */
import React from "react";
import styles from './styles.css' export default function App() { return ( <div className={styles.header}> <h1>Hello Medium</h1> </div> );
}

Обратите внимание, что:

Мы просто импортируем объект из CSS-файла ./styles.css

Мы используем объект styles, в нашем случае, чтобы получить доступ к правилам

Плюсы: нет конфликтов пространств имен и конфликтов имен, прост в использовании и рефакторинге, что позволяет легко удалять мертвый код из проектов. Кроме того, он поддерживают все, что вам нужно в CSS.

Минусы: в основном более подробный опыт использования их в ваших файлах.

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

Не тот способ, который я рекомендую. Здесь вы просто импортируете файл CSS внутри компонентов, упуская множество других функций, таких как предотвращение конфликтов имен:

/* App.jsx */
import React from "react";
import'./styles.css' export default function App() { return ( <div className='header'> <h1>Hello Medium</h1> </div> );
}

Styled-Components

Мой любимый способ написания CSS в React. С помощью styled-components вы устанавливаете стили на уровне компонентов, что позволит определить надлежащие, настраиваемые компоненты React, стилизованные под ваши пожелания.

Плюсы: нет конфликтов имен классов, менее громоздкие и более значимые компоненты. Простое удаление CSS и сопровождение. Поддержка важных функций CSS и динамических стилей.

Минусы: наверняка есть кривая обучения. Кроме того, они, как правило, обеспечивают худшие возможности IDE без ярлыков (есть исключения благодаря некоторым расширениям кода).

Основные моменты

Используйте встроенные стили только для очень маленьких проектов или очень простых настроек внешнего вида элементов интерфейса.

Если вы любите использовать CSS и не хотите сталкиваться с проблемой обучения, используйте модули CSS и наслаждайтесь своими навыками.

Если вы не возражаете против литералов шаблонов и изучения нового способа создания CSS, подумайте об использовании styled-components, поскольку они отлично подходят для создания библиотек пользовательских компонентов и масштабируемых компонентов.

Как всегда, спасибо за ваше время.

Автор: Piero Borrelli

Источник: https://medium.com

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