Разгадан популярный вопрос в интервью.
Как вы стилизуете компонент React? Вы знаете какие-нибудь альтернативы? Разработчикам React часто задают вопросы на собеседовании.
Есть разные способы стилизации компонентов React, давайте обсудим каждую альтернативу и посмотрим, почему и когда вам следует их использовать.
Мы обсудим:
- Стиль на чистом CSS
- Реагировать на встроенные стили
- Компоненты в стиле React
- Модули CSS
- SASS / SCSS
Чистый стиль CSS
Самый простой способ - включить файл CSS в файл HTML вашего приложения с помощью простого <link rel="stylesheet" href="/styles/bootstrap.css" />. Затем вы можете повторно использовать определенные классы в своих компонентах для соответствия файлам CSS. Вы можете повторно использовать классы, предоставив их в className опоре ваших компонентов.
Этот метод в основном используется со сторонними библиотеками, например, bootstrap или tailwind-css. Для таких приложений это имеет смысл. Однако не рекомендуется писать собственное приложение React с собственным большим файлом CSS. Вы не хотите, чтобы в вашей кодовой базе оставался один гигантский файл CSS, его было бы слишком сложно поддерживать.
В любом случае не забывайте, что вам все равно придется применить некоторую обработку к вашему файлу CSS, чтобы минимизировать его и уменьшить его размер для сетевого транспорта.
Реагировать на встроенные стили
Другой простой прием - использовать встроенные стили в вашем компоненте. Предоставляя компоненту свойство styles, React анализирует его как встроенные стили. Обратите внимание, React ожидает, что опора styles будет объектом со свойствами camelCased и строковыми значениями.
Вот пример:
Обратной стороной является то, что стили ограничены этим компонентом и не могут быть повторно использованы в вашем приложении. Если вам когда-либо понадобится изменить дизайн или цвет одного конкретного элемента во всем приложении, вам нужно будет обновить все встроенные стили.
С точки зрения ремонтопригодности, может стать трудно поддерживать, если все было сделано с помощью встроенных стилей. Это также может повлиять на читаемость кода. В общем, у вас должна быть очень веская причина для выбора встроенного стиля вместо альтернатив. Кроме того, существуют ограничения на то, что можно делать с помощью встроенных стилей React, например, :hover селекторы не могут использоваться, если не добавляется много избыточного кода.
Одна из областей, где могут быть полезны встроенные стили, - это когда вы настраиваете небольшую демонстрацию или доказательство концепции, хотя можно возразить, что настройка модулей CSS не займет намного больше времени.
Компоненты в стиле React
Стилизованные компоненты аналогичны встроенным стилям в том смысле, что свойства стиля по-прежнему определены внутри файла компонента, однако теперь стили можно повторно использовать в вашем компоненте.
Преимущество стилизованных компонентов в том, что они не влияют на какие-либо потенциально уже существующие классы CSS на странице. Представьте, что у вас есть определенная библиотека на странице, которая использует класс .lightbox, создание вашего собственного .lightboxclass с использованием стилизованных компонентов или встроенных стилей никогда не повлияет на этот класс.
Чтобы создать стилизованный компонент, вам нужно сначала установить в свой проект пакет styled-components npm.
npm install styled-components
Затем нам нужно определить новый компонент с выбранным стилем, например, стилизованный пользовательский Text компонент.
Как мы видим, компонент BigRedText можно затем многократно использовать внутри вашего компонента. Предоставляемые стили представлены в обычном синтаксисе CSS, а не в синтаксисе объекта стилей React.
Стилизованные компоненты - отличный способ управления стилями в React. Я рекомендую прочитать статью Гапура Касима о стилизованных компонентах, чтобы глубже понять все возможности стилизованных компонентов.
Модули CSS
Модули CSS работают по-другому. Для каждого компонента React вам потребуется создать отдельный файл CSS. Затем файл CSS можно импортировать в ваш компонент React для использования. В процессе сборки ваши классы CSS преобразуются в случайные имена классов, чтобы избежать возможных конфликтов имен между вашими собственными компонентами или компонентами, которые уже существуют на странице.
Это означает, что если исходная веб-страница уже имеет класс .lightbox, вы можете безопасно определить класс .lightbox для использования в своем компоненте, не затрагивая существующий класс .lightbox!
С модулями CSS CSS действительно разделен на компоненты React, и CSS не может проникнуть в другой компонент. Это одно из главных преимуществ. Наличие стилей в отдельном файле также упрощает управление, особенно для больших проектов, которые, как правило, со временем расширяются.
В приведенном выше примере вы можете видеть, что наш файл CSS должен называться .module.css. Затем вы также должны заметить, что мы не устанавливаем className="custom-text", потому что фактическое имя класса будет автоматически сгенерировано, чтобы избежать конфликтов имен. Чтобы решить эту проблему, мы используем значение импортированного модуля CSS, TextStyles.customText. Значение может быть чем-то похожим на mycomponent-module_title_42nlo, хотя окончательные имена классов можно настроить по своему вкусу.
Вы можете увидеть, как автоматически создаются имена классов, в статье Рафаэля Круза ниже:
Использование SCSS
Использование SCSS совершенно отдельно от других методов, его можно использовать в сочетании с нашим первым решением, чистыми файлами CSS или модулями CSS. Вам все равно нужно будет добавить компиляцию из SCSS в CSS в процессе сборки.
Объяснение того, что SCSS выходит за рамки этой статьи, поэтому, если вы хотите узнать о нем больше, прочтите следующую статью, чтобы узнать об этом в течение 5 минут.
Резюме
Важно найти метод, который хорошо выполняет работу для вашего конкретного проекта, сохраняя при этом хорошую ремонтопригодность кода. Не существует единого решения, подходящего для всех, и такого подхода быть не должно. Обращайте внимание на то, чтобы проект был последовательным. Сочетание компонентов в стиле React с другими стратегиями, такими как модули CSS, затруднит сопровождение проекта.
Нет неправильного пути, если решение работает хорошо и с ним эффективно работать! Я лично настоятельно рекомендую как модули CSS, так и стилизованные компоненты, так как эти способы многократно опробовались в очень больших проектах. Если у вас нет веской причины, я бы не стал сразу рекомендовать встроенные стили в качестве альтернативы для всех стилей, но это определенно может быть полезным инструментом для быстрого тестирования проекта или подтверждения концепции.
В конце концов, важно знать, что возможно с этой технологией, затем опробовать ее и набраться опыта. Когда у вас будет некоторый опыт работы со всеми этими методами, вы сможете решить, какой из них лучше всего подойдет для вашего проекта! Я рекомендую потратить некоторое время на их реализацию, будь то небольшой демонстрационный проект, чтобы привыкнуть к различным способам стилизации React. Что еще более важно, убедитесь, что вы получаете удовольствие, пробуя это.
