styled components
v6.1.13
V5からアップグレードしますか？移行ガイドを参照してください。
タグ付きテンプレートリテラル（最近の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（Web用）とReactネイティブの両方と互換性があります。つまり、本当に普遍的なアプリにも最適です。詳細については、React Nativeのドキュメントを参照してください。
フロントエンドセンターでサポートされています。これを可能にしてくれてありがとう！
styled-componentsのドキュメントを参照してください。
最も訪問されたページのいくつかにクイックリンク：
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に感謝します。
