styled components
v6.1.13
Обновление с V5? Смотрите руководство по миграции.
Используя Tagged Template Literals (недавнее дополнение к JavaScript) и мощность CSS, styled-components позволяют вам писать фактический код CSS для стиля ваших компонентов. Это также удаляет отображение между компонентами и стилями-использование компонентов в качестве конструкции стиля низкого уровня не может быть проще!
const Button = styled . button `
color: grey;
` ;В качестве альтернативы вы можете использовать стиль объектов. Это позволяет легко портировать CSS из встроенных стилей, при этом поддерживая более продвинутые возможности для компонентов стиля, такие как селекторы компонентов и медиа-запросы.
const Button = styled . button ( {
color : 'grey' ,
} ) ;Эквивалентно:
const Button = styled . button `
color: grey;
` ; styled-components совместим как с React (для Интернета), так и с реагированием, что означает, что это идеальный выбор даже для действительно универсальных приложений! Смотрите документацию о React Native для получения дополнительной информации.
Поддерживается Front End Center. Спасибо, что сделали это возможным!
Смотрите документацию на styled-components.com/docs для получения дополнительной информации об использовании styled-components !
QuickLinks на некоторые из самых посещаемых страниц:
import React from 'react' ;
import styled from 'styled-components' ;
// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled . h1 `
font-size: 1.5em;
text-align: center;
color: palevioletred;
` ;
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled . section `
padding: 4em;
background: papayawhip;
` ;
function MyUI ( ) {
return (
// Use them like any other React component – except they're styled!
< Wrapper >
< Title > Hello World, this is my first styled component! < / Title >
< / Wrapper >
) ;
}Это то, что вы увидите в своем браузере:
main филиал предназначен для самой точной версии стиля-компонентов, в настоящее время V6. Для изменений, нацеленных на V5, укажите свои PRS в филиале legacy-v5 .
styled-componentsМного тяжелой работы идет в общественные библиотеки, проекты и руководства. Многие из них облегчают работу или помогать вам с вашим следующим проектом! Есть также много интересных приложений и сайтов, которые люди создали с использованием стиля-компонентов.
Обязательно отправляйтесь в удивительные компоненты, чтобы увидеть их всех! И, пожалуйста, внесите свой вклад и добавьте свою работу в список, чтобы другие могли найти ее.
Если вы хотите внести свой вклад в styled-components пожалуйста, посмотрите наши рекомендации по внесению вклад и сообщества, они помогут вам встать локально и объяснить весь процесс.
Пожалуйста, также обратите внимание, что все репозитории в рамках организации styled-components следуют нашему кодексу поведения, обязательно просмотрите и следуйте им.
Пусть все знают, что вы используете стиль-компоненты →
[ ![ style: styled-components ] ( https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e )] ( https://github.com/styled-components/styled-components ) Этот проект существует благодаря всем людям, которые вносят свой вклад. [Способствовать].
Спасибо всем нашим покровителям! [Станьте покровителем]
Поддержите этот проект, став спонсором. Ваш логотип будет отображаться здесь со ссылкой на ваш сайт. [Станьте спонсором]
Лицензировано по лицензии MIT, Copyright © 2016-Present Glen Maddern и Maximilian Stoiber.
Смотрите лицензию для получения дополнительной информации.
Этот проект основан на длинной линии более ранней работы умных людей по всему миру. Мы хотели бы поблагодарить Чарли Сомервилля, Ника Графа, Сунил Пай, Майкла Чана, Андрея Поппа, Джеда Уотсона и Андрея Ситника, которые внесли идеи, код или вдохновение.
Особое спасибо @Okonet за фантастический логотип.
