Tim kami menggunakan
komponen yang ditata untuk menata
komponen yang bereaksi.
Sudah ada artikel tentang komponen-komponen gaya di Habré, jadi kami tidak akan membahas ini secara rinci.
Memperkenalkan komponen GayaLebih baik, lebih cepat, lebih kuat: komponen v4 gayaSetelah menulis banyak komponen, kami menemukan bahwa di hampir setiap komponen kami menyalin properti duplikat.
Misalnya, dalam banyak komponen kami menulis seperti ini:
padding-top: ${props => props.paddingTop || '0'}; padding-bottom: ${props => props.paddingBottom || '0'}; padding-right: ${props => props.paddingRight || '0'}; padding-left: ${props => props.paddingLeft || '0'};
Sistem gaya
Menyalin properti duplikat mulai menjengkelkan, dan kami menarik potongan-potongan kode duplikat menjadi fungsi yang dapat digunakan kembali secara terpisah. Tetapi saya berpikir bahwa mungkin seseorang telah menerapkan sesuatu seperti ini sebelum kita dan mungkin lebih indah dan universal. Saya mulai mencari google dan menemukan
sistem gaya .
Styled-System menyediakan serangkaian fitur gaya. Setiap fungsi gaya menyediakan set properti sendiri yang elemen gaya berdasarkan pada nilai-nilai yang ditentukan dalam tema aplikasi. Sistem gaya memiliki API yang kaya dengan fungsi untuk sebagian besar properti CSS.
Contoh sistem gaya berdasarkan pada komponen yang ditata
import { space, width, fontSize, color } from 'styled-system'; import styled, { ThemeProvider } from 'styled-components'; import theme from './theme'; const Box = styled.div` ${space} ${width} ${fontSize} ${color} `; render( <ThemeProvider theme={theme}> <Box p={3} bg="whites.10" color="orange"> This is a Box </Box> </ThemeProvider>, );
Manfaat Utama
- Menambahkan properti yang dapat Anda gunakan dalam tema Anda sendiri.
- Pengaturan cepat ukuran font, margin, bantalan, lebar, dan properti css responsif lainnya melalui alat peraga
- Skalabilitas tipografi
- Skalabilitas margin dan bantalan
- Mendukung palet warna
- Bekerja dengan sebagian besar pustaka css-in-js, termasuk komponen yang ditata dan emosi
- Digunakan oleh Rebass , Rebass Grid , dan Sistem Desain Priceline
Menghubungkan Tema
Di atas, saya memberikan contoh kode yang menggunakan ThemeProvider. Kami meneruskan tema kami ke penyedia, dan sistem gaya mengaksesnya melalui alat peraga.
Contoh topik kita
export const theme = { fontSizes: [ 12, 14, 16, 18, 24, 32, 36, 72, 96 ], space: [
sistem gaya akan mencoba untuk menemukan nilai dalam objek tema berdasarkan pada properti komponen yang diteruskan. Properti bersarang mendalam didukung, jika nilai yang ditransmisikan tidak ditemukan dalam topik, maka nilai tersebut ditafsirkan sebagaimana adanya.
Sebagai contoh, kami melewati komponen color = "red". Tidak ada nilai color.red di objek topik, tetapi nilai merah akan diterjemahkan ke css sebagai merah. Jadi setelah transpilasi di inspektur kita akan lihat
color: red;
Contoh lain menggunakan nilai topik
Gaya responsif
Untuk menjelaskan properti responsif dengan cepat, cukup berikan array nilai
<Box width={[ 1,
Varian
Sistem gaya memungkinkan kita untuk mendefinisikan objek yang dapat digunakan kembali dalam topik kita yang berisi set warna, gaya teks, dan sebagainya. Misalnya, dalam topik kami di atas, kami
Kami menggunakan opsi untuk ukuran dan warna tombol.
buttonSizes: { xs: ` height: 16px; padding: 0 16px; font-size: 10px; `, sm: ` height: 24px; padding: 0 24px; font-size: 13px; `, default: ` height: 24px; padding: 0 30px; font-size: 13px; `, }, buttonColors: { green: ` background-color: #a2d628; color: ${colorToRgba('#a2d628', 0.5)}; `, blue: ` background-color: #507bfc; color: ${colorToRgba('#507bfc', 0.5)}; `, lightBlue: ` background-color: #10aee7; color: ${colorToRgba('#10aee7', 0.5)}; `, default: ` background-color: #cccccc; color: ${colorToRgba('#cccccc', 0.5)}; ` }
Implementasi opsi:
export const buttonSize = variant({ prop: 'size', key: 'buttonSizes' }); export const buttonColor = variant({ prop: 'colors', key: 'buttonColors' });
Komponen Tombol
export const Button = styled(Box.withComponent('button'))` ${buttonSize} ${buttonColor} `; Button.propTypes = { ...buttonSize.propTypes, ...buttonColor.propTypes, }
Contoh menggunakan tombol biru berukuran sedang
<Button size="md" colors="blue" />
Deskripsi dan dokumentasi yang lebih terperinci tentang sistem gaya di
kantor. halaman githubUPD: saat menulis artikel, sistem gaya mendapat halaman sendiri dengan dokumentasi dan contoh-contoh
https://styled-system.com/ .