Публикации по теме 'styled-components'
Как использовать реквизит React.js со стилями-компонентами
Что такое стилизованные компоненты и почему мы хотим их использовать?
Вы знаете стилизованные компоненты? Если нет, то вот краткое введение: styled-components - это библиотека NPM, которая позволяет вам решать стилизацию вашего приложения React.js с помощью CSS-in-JS. Одна из причин, по которой это может быть так удобно, заключается в том, что он также позволяет использовать реквизиты React.js, которые мы можем передавать компонентам в styled-components для создания динамического..
Почему стилизованные компоненты? 💅
Один вопрос, который я часто вижу в Твиттере, - почему разработчик должен выбирать стилизованные компоненты по сравнению с другими библиотеками CSS-in-JS (и другими формами CSS в целом). Вот некоторые из моих мыслей в сжатой форме:
1. В конце концов, это просто CSS.
Вы можете выбрать, как именно писать стили, мы не поощряем и не применяем какой-либо конкретный синтаксис. Хотите написать нормально выглядящий CSS ? Милая. Хотите написать объекты стиля , похожие на встроенные стили..
Стилизация компонента React с помощью styled-components : часть 2
В моем предыдущем посте Style React component with styled-components: Part-1 я написал, как мы можем начать использовать styled-components , и мы создали с ним один компонент Spinner.
Теперь мы можем видеть, как мы можем передать реквизиты стилизованному компоненту с именем StyledSpinner и изменить его цвет/поведение.
В этом примере я изменю цвет границы, передав prop. Итак, стилизованный компонент будет показывать цвет, который мы ему передаем.
Давайте используем реквизит для..
Шаблон наследования стилизованных компонентов
Хотите создать библиотеку расширяемых компонентов реакции? Вот один шаблон, использующий стилизованные компоненты, который позволяет потребителю расширять стили предопределенных компонентов.
Пример
Допустим, мы создали базовый компонент под названием Article . Затем мы хотим создать почти аналогичный компонент под названием CyanCyberpunkArticle .
В строке 4 Header доступен как статическое свойство Article . Чтобы применить наше изменение стиля, мы передаем..
Как начать работу с GatsbyJS - часть 3: Изображение Gatsby
Эта статья является частью 3 серии Как начать с Gatsby JS .
Шаг 6. Изображение Gatbsy
Одно из важнейших преимуществ Гэтсби - он работает очень быстро.
Многие задержки при загрузке страниц вызваны слишком большими и неоптимизированными изображениями. У Gatsby есть несколько полезных плагинов, которые помогают полностью оптимизировать изображения и поддерживать высокую производительность на нашем веб-сайте.
Рекомендуемый подход - использовать gatbsy-image - компонент React,..
Воспользуйтесь преимуществами каскадирования CSS для написания управляемых CSS-in-JS.
У меня есть компонент кнопки styled-component , который будет принимать следующие реквизиты:
interface IButtonProps {
size?: SizeType ;
color?: ButtonColorType ;
outline?: boolean ;
square?: boolean ;
icon?: boolean ;
className?: string ;
theme?: any ;
}
В зависимости от реквизита кнопка будет иметь различный радиус границы, цвет границы, цвет, заливку, отступы и т. д.
С помощью нескольких вспомогательных функций темы я могу определить кнопку следующим образом:..
Как создать галерею SVG с помощью палитры цветов в React
Недавно я сделал галерею для ManyPixels , в которой отображаются SVG-иллюстрации, которые могут помочь людям в их проектах, что-то вроде Undraw по своему поведению.
Использовать его довольно просто: вы просматриваете галерею, выбираете цвет, соответствующий вашему бренду, щелкаете по нему, загружаете в формате PNG или SVG (с обновленными цветами!) И вуаля!
Так как я это сделал?
Это работа разработчиков и иллюстраторов.
Правильный дизайн
Для создания всех иллюстраций мы..
