Публикации по теме 'styled-components'
Как начать работу с GatsbyJS - часть 2: Типографика как динамический компонент
Эта статья является частью 2 серии Как начать с Gatsby JS .
Шаг 5. Типографика - динамический компонент и стилизованная система
Что касается типографики, сначала я думаю о создании компонента для каждого стиля текста и его импорте по мере необходимости.
Однако не все текстовые стили имеют одинаковые HTML-теги. Подготовка нескольких одинаковых текстовых стилей с другими тегами кажется не лучшим решением.
К счастью, Dynamic Component позволяет применять к компоненту любой..
Как работают библиотеки CSS в JS
Внутреннее устройство библиотек CSS-in-JS, описанное с помощью styled-components
Давайте посмотрим на пример того, как стилизовать div с помощью styled-components.
import styled from 'styled-components';
const AwesomeStyledDiv = styled.div`
width: 20px;
height: 10px;
background-color: blue;
`
В приведенном выше примере мы:
Импортировано что-то из стилизованных компонентов под названием styled . Определено, какой HTML-элемент следует стилизовать, в данном..
Как использовать стилизованные компоненты в React
Создание простых элементов, чтобы научиться использовать стилизованные компоненты
В этой статье мы собираемся использовать styled-components для стилизации компонентов. Мы научимся этому, создавая простые элементы, добавляя основное состояние для изменения цвета, например Bootstrap, расширяя стиль из пользовательского интерфейса материала, а также изменяя тему с помощью ThemeProvider.
Исходный код и обучающие видео:..
3 основных принципа для начала работы со стилями-компонентами
3 основных принципа для начала работы со стилями-компонентами
Этот пост изначально был опубликован на моем личном сайте .
Я люблю styled-components . Я использую эту библиотеку для всех своих личных проектов (в том числе для своего личного сайта ). Он очень мощный и также очень простой в использовании. В этой статье я расскажу о 3 основных вещах, которые вы можете делать с styled-components , так что вы можете начать использовать его прямо сейчас.
Но сначала… Что..
Создайте подсветку синтаксиса CSS с помощью компонентов React и Styled
Недавно я создал руководство по стилю с помощью GatsbyJS, и мне нужно было предоставить блоки CSS в качестве примеров. Я хотел, чтобы блоки имели подсветку синтаксиса, были удобочитаемыми и имели функцию быстрого копирования для тех, кто использует руководство. Я не мог найти компонент, который обладал бы всеми необходимыми мне функциями, поэтому решил создать свой собственный с помощью Стилизованных компонентов .
Готовый компонент можно найти в этом Gist:..
Создайте темный режим своего приложения, используя стилизованные компоненты
Многие приложения и программные пакеты начали поставлять дополнительный темный режим , который пользователь может включить в качестве альтернативы более светлому режиму по умолчанию. Помимо эстетических различий, есть много других упомянутых преимуществ, от снижения налогов на расход заряда батареи вашего устройства до фактического улучшения состояния вашего здоровья.
Хотя на самом деле мы не собираемся рассматривать альтернативные преимущества использования темного режима в этой..
Контрольный список инструментов для стилизованных компонентов
Я был удивлен, сколько препятствий у меня возникло после первоначальной настройки стилизованных компонентов. Когда вы начнете использовать их на практике, вы можете обнаружить, что это нечто большее, чем просто npm install styled-components .
Этот контрольный список основан на моем опыте, поэтому он не обязательно является исчерпывающим. В нем будет рассказано, как заставить стилизованные компоненты работать со следующим:
Отладка Тестирование Jest & Snapshot Потоковый ввод..
