Публикации по теме styled-components

Публикации по теме 'styled-components'

React: стилизованные компоненты

React: стилизованные компоненты Я хотел написать пост о стилизованных компонентах и о том, как они работают. Спасибо за проверку статьи. Для этого я буду использовать этот репозиторий . Это базовое приложение CRUD, в котором вы можете добавлять/удалять/редактировать контент. Если вас интересует сборка, я делаю это здесь, в этом посте . Стилизованные компоненты стали очень популярны в среде React. При правильном использовании они могут полностью устранить необходимость в..

Недавний эксперимент на хакатоне

Моя компания FreeWheel недавно провела однодневный хакатон. Несколько товарищей по команде и я решили создать интернет-магазин, который действует как центр для всех внутренних приложений FreeWheel. Также мы хотим испытать некоторые новые технологии. Для бэкэнда мы выбрали бессерверный API с DynamoDB в качестве хранилища. Для внешнего интерфейса мы решили создать SPA (одностраничное приложение) со стеком React + Mobx-state-tree + Styled-component . Я сосредоточен в основном на..

Используйте свои MakeStyles!

Основы пакета makeStyles, предлагаемые Material UI Используя Material Ui , вы получаете доступ к множеству различных инструментов поверх стилизованных компонентов. makeStyles - это функция, которая позволяет использовать JavaScript для стилизации компонентов. makeStyles в своей основе использует JSS, что по сути переводит JavaScript в CSS. Что делает этот вариант отличным, так это то, что он запускается, когда страница запрашивается на стороне сервера. 1. Импорт Чтобы..

Создавайте повторно используемые компоненты React с помощью styled-components

Я впервые использовал styled-components , когда начал работать над своим первым большим приложением, и мне очень нравится, как оно работает. Он позволяет создавать повторно используемые компоненты, которые легко наращивать и адаптировать к новым ситуациям по мере создания различных макетов. Я собираюсь рассказать о некоторых способах использования styled-components для создания повторно используемых компонентов, которые абстрагируются от CSS и HTML, создавая вашу собственную..

Разделите свой код с помощью стилизованных компонентов

Одна вещь, которая всегда заставляла меня немного нервничать по поводу CSS в JS, заключалась в том, что все примеры включали CSS в файл JS, и это мне никогда не нравилось. Мы все знаем этот удивительный график, и это правда, но для того, кто хранит все свои функции, вызовы API и типы потоков в другом файле, эта идея была немного странной, поэтому я сделал небольшое открытие, а также поспрашивал в стилизованных компонентах. community и увидели, что разделение CSS и JS вполне..

Как стилизованные компоненты работают под капотом? 💅

Чтобы по-настоящему понять, как работают стилизованные компоненты, нам нужно рассмотреть функцию javascript, называемую литералами шаблона, которая и поддерживает стилизованные компоненты. Если вы уже знакомы с шаблонными литералами, не стесняйтесь пропустить этот раздел, если не оставайтесь здесь, и я объясню вам, что это такое. Литералы шаблона - это строковые литералы, которые позволяют вставлять выражения. Они заключаются в обратную галочку вместо одинарных кавычек и могут..

Стилизованные компоненты или модули CSS - для разработчиков React

Большинство разработчиков React думают о приложении как о компонентах. Строительные блоки с компонентами и, если возможно, с компонентами многократного использования. Приятно видеть, что повторно используемый компонент был полезен в разных частях нашего приложения. И, как разработчик React, я должен признать, что стилизованные компоненты вызывают у меня такое же хорошее чувство. Хорошо, но оставим в стороне философские сочинения. Я начну с выделения некоторых из основных причин,..