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와 호환됩니다. 즉, 진정한 보편적 인 앱에도 완벽한 선택입니다! 자세한 내용은 React Native에 대한 문서를 참조하십시오.
프론트 엔드 센터에서 지원합니다. 이것을 가능하게 해주셔서 감사합니다!
styled-components 사용에 대한 자세한 내용은 Styled-components.com/docs의 문서를 참조하십시오 !
가장 많이 방문한 일부 페이지에 대한 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 Organization의 모든 저장소는 당사의 행동 강령을 따라 검토하고 따르십시오.
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.
자세한 내용은 라이센스를 참조하십시오.
이 프로젝트는 전 세계의 영리한 사람들의 초기 작품을 기반으로합니다. 우리는 Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson 및 Andrey Sitnik에게 아이디어, 코드 또는 영감을 주셔서 감사합니다.
환상적인 로고에 대한 @okonet에게 특별한 감사를드립니다.
