styled modern normalize

modern-normalize.css untuk komponen bergaya

Metode impor umum untuk modern-normalize.css adalah menggunakan impor tanpa nama yang berfungsi dengan baik untuk proyek-proyek dengan vanilla CSS atau alur kerja pra-prosesor seperti sass/kurang dan bundler seperti webpack, tetapi tidak memanfaatkan keunggulan perpustakaan CSS-in-JS seperti komponen bergaya , EG-prefixing dan EG-prefixing.

Styled-Modern-Normalize adalah paket proksi modern-normalize.css untuk komponen gaya untuk memberikan CSS sebagai templat literal dengan interpolasi dengan menggunakan fungsi API css gaya-komponen . Ini memungkinkan untuk mengimpor dan menggunakannya melalui injectGlobal atau komponen gaya lainnya.

Paket ini didasarkan dan kompatibel dengan modern-normalize.css versi 0.5.0. Gaya yang disediakan kompatibel dengan komponen gaya V2, V3 dan V4.

Memulai

Instalasi

Tambahkan paket sebagai ketergantungan pada proyek Anda:

npm install --save styled-modern-normalize

Jalankan npm install dari dalam root proyek untuk bootstrap proyek dan instal dependensi pengembangan dan runtime. Perhatikan bahwa ini tidak akan menginstal paket komponen gaya yang diperlukan yang didefinisikan sebagai ketergantungan sebaya dan harus diinstal secara terpisah seperti yang dijelaskan dalam bagian dependensi sebaya di bawah ini.

Ketergantungan sebaya

Paket ini menggunakan fungsi API gaya-komponen yang mengembalikan komponen bereaksi.

Oleh karena itu paket ini tergantung pada komponen gaya dan paket bereaksi yang didefinisikan sebagai dependensi sebaya.

Pengguna Linux & MacOS dapat dengan mudah menginstal semua dependensi teman sebaya dengan menggunakan NPX yang dilengkapi dengan NPM 5 atau lebih tinggi:

npx install-peerdeps styled-modern-normalize

Saat menggunakan NPM <5, alat NPX tidak diprakarsian, tetapi pengguna dapat dengan mudah menginstalnya secara global dan kemudian menjalankan perintah di atas atau menginstal paket instalasi-peerdeps secara lokal/global untuk membiarkannya menangani pemasangan semua dependensi rekan.

 # Via local installation…
npm install install-peerdeps
./node_modules/.bin/install-peerdeps styled-modern-normalize

# …or globally.
npm install -g install-peerdeps
install-peerdeps styled-modern-normalize

Secara manual

Semua dependensi rekan juga dapat diinstal secara manual (misalnya untuk pengguna yang menjalankan sistem berbasis Microsoft Windows) dengan menginstal versi yang benar dari setiap paket:

npm info " styled-modern-normalize@latest " peerDependencies

Penggunaan

Bertaya-modern-normalisasi dapat digunakan dengan mengimpor default atau dinamai Ekspor modernNormalize .

 // With default export…
import modernNormalize from "styled-modern-normalize" ;

// …or via named export.
import { modernNormalize } from "styled-modern-normalize" ;

Untuk menyuntikkan gaya saat menggunakan komponen gaya v4 fungsi createGlobalStyle API dapat digunakan yang menghasilkan komponen jangkauan Component StyledComponent :

 // Usage with the latest "styled-components" v4.
import { createGlobalStyle } from "styled-components" ;

const ModernNormalize = createGlobalStyle `
  ${ modernNormalize }
  /* ... */
` ;

// Use the generated component in your rendering logic to inject the styles.
/* ... */
< React . Fragment >
  < ModernNormalize />
</ React . Fragment > ;
/* ... */

Saat menggunakan gaya-komponen V2 atau V3, gaya dapat disuntikkan menggunakan API injectGlobal :

 // Usage with "styled-components" v2 or v3.
import { injectGlobal } from "styled-components" ;

const cssBaseline = injectGlobal `
  ${ modernNormalize }
  /* ... */
` ;

Versi Modern-Normalize.css Paket ini saat ini didasarkan diekspor sebagai MODERN_NORMALIZE_VERSION :

 import { MODERN_NORMALIZE_VERSION } from "styled-modern-normalize" ;

// Example:
console . log ( MODERN_NORMALIZE_VERSION ) ; // "0.5.0"

Alur kerja pengembangan

Jalankan npm install dari dalam root proyek untuk bootstrap proyek dan instal dependensi pengembangan dan runtime. Untuk memulai pengembangan dengan kompilasi ulang otomatis pada perubahan file sumber apa pun di src/ Directory Run

npm run dev

Proyek ini juga dikonfigurasi untuk formatter kode yang lebih cantik yang memberikan dukungan integrasi bagi banyak editor untuk misalnya secara otomatis memformat file sumber pada simpan.

Bangunan

Bangunan distribusi dapat dibuat dengan berlari

npm run dist

Bangunan integrasi terus menerus berjalan di Circle CI dan Travis CI.

Pengujian

Berbaris

Sumber JavaScript diserahkan dengan Eslint menggunakan konfigurasi basis arktikikestudio yang dapat dijalankan dengan

npm run lint:js

Sumber-sumber penurunan harga dililitkan dengan prajurit-lint menggunakan preset arcticicestudio yang dapat dijalankan dengan

npm run lint:md

Semua tugas berbaris dapat dijalankan

npm run lint

Berkontribusi

Baca panduan yang berkontribusi untuk mempelajari tentang proses pengembangan dan cara mengusulkan saran peningkatan dan melaporkan bug, cara mengirimkan permintaan tarik dan styleGuides proyek, organisasi cabang, dan model versi.

Panduan ini juga mencakup informasi tentang contoh minimal, lengkap, dan dapat diverifikasi dan cara -cara lain untuk berkontribusi pada proyek seperti meningkatkan masalah yang ada dan memberikan umpan balik tentang masalah dan permintaan tarik.

Hak Cipta © 2018-Present Arctic Ice Studio & Sven Greb