styled components
v6.1.13
Meningkatkan dari V5? Lihat Panduan Migrasi.
Memanfaatkan literal template yang ditandai (tambahan terbaru untuk JavaScript) dan kekuatan CSS, styled-components memungkinkan Anda untuk menulis kode CSS yang sebenarnya untuk menata komponen Anda. Ini juga menghilangkan pemetaan antara komponen dan gaya-menggunakan komponen sebagai konstruksi gaya tingkat rendah tidak bisa lebih mudah!
const Button = styled . button `
color: grey;
` ;Atau, Anda dapat menggunakan objek gaya. Ini memungkinkan porting CSS yang mudah dari gaya inline, sambil tetap mendukung kemampuan komponen gaya yang lebih canggih seperti pemilih komponen dan kueri media.
const Button = styled . button ( {
color : 'grey' ,
} ) ;Setara dengan:
const Button = styled . button `
color: grey;
` ; styled-components kompatibel dengan keduanya bereaksi (untuk web) dan bereaksi asli-artinya itu adalah pilihan yang sempurna bahkan untuk aplikasi yang benar-benar universal! Lihat dokumentasi tentang React Native untuk informasi lebih lanjut.
Didukung oleh pusat ujung depan. Terima kasih telah memungkinkan ini!
Lihat dokumentasi di styled-components.com/docs untuk informasi lebih lanjut tentang menggunakan styled-components !
QuickLinks ke beberapa halaman yang paling banyak dikunjungi:
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 >
) ;
}Inilah yang akan Anda lihat di browser Anda:
Cabang main adalah untuk versi yang paling lancar dari komponen gaya, saat ini V6. Untuk perubahan yang menargetkan V5, silakan arahkan PR Anda di cabang legacy-v5 .
styled-componentsBanyak kerja keras masuk ke perpustakaan komunitas, proyek, dan pemandu. Banyak dari mereka memudahkan untuk memulai atau membantu Anda dengan proyek Anda berikutnya! Ada juga banyak aplikasi dan situs menarik yang dibangun orang menggunakan komponen gaya.
Pastikan untuk pergi ke komponen bergaya luar biasa untuk melihat semuanya! Dan tolong berkontribusi dan tambahkan pekerjaan Anda sendiri ke daftar sehingga orang lain dapat menemukannya.
Jika Anda ingin berkontribusi pada styled-components silakan lihat Pedoman Kontribusi dan Komunitas kami, mereka akan membantu Anda mengatur secara lokal dan menjelaskan seluruh proses.
Harap perhatikan juga bahwa semua repositori di bawah organisasi styled-components mengikuti kode perilaku kami, pastikan untuk meninjau dan mengikutinya.
Biarkan semua orang tahu Anda menggunakan komponen gaya →
[ ![ 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 ) Proyek ini ada berkat semua orang yang berkontribusi. [Menyumbang].
Terima kasih untuk semua pendukung kami! [Menjadi pendukung]
Dukung proyek ini dengan menjadi sponsor. Logo Anda akan muncul di sini dengan tautan ke situs web Anda. [Menjadi sponsor]
Lisensi di bawah lisensi MIT, Hak Cipta © 2016-sekarang Glen Maddern dan Maximilian Stoiber.
Lihat lisensi untuk informasi lebih lanjut.
Proyek ini dibangun di atas garis panjang karya sebelumnya oleh orang -orang pintar di seluruh dunia. Kami ingin mengucapkan terima kasih kepada Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik yang menyumbangkan ide, kode atau inspirasi.
Terima kasih khusus kepada @okonet untuk logo yang fantastis.
