styled modern normalize

modern-normalize.css สำหรับองค์ประกอบสไตล์

วิธีการนำเข้าทั่วไปสำหรับ modern-normalize.css คือการใช้การนำเข้าที่ไม่มีชื่อซึ่งใช้งานได้ดีสำหรับโครงการที่มี วานิล ลา CSS หรือเวิร์กโฟลว์ล่วงหน้าเช่น SASS/Less และ Bundler เช่น Webpack แต่ไม่ได้ใช้ประโยชน์จากข้อดีของ CSS-in-JS

Styled-Modern-Normalize เป็นแพ็คเกจพร็อกซีของ Modern-normalize.css สำหรับองค์ประกอบสไตล์เพื่อให้ CSS เป็นตัวอักษรเทมเพลตที่มีการแก้ไขโดยใช้ฟัง ก์ชั่ น css API ขององค์ประกอบ สิ่งนี้ช่วยให้สามารถนำเข้าและใช้งานผ่าน injectGlobal หรือส่วนประกอบสไตล์อื่น ๆ

แพ็คเกจนี้ใช้และเข้ากันได้กับ Modern-Normalize.css เวอร์ชัน 0.5.0 รูปแบบที่ให้มานั้นเข้ากันได้กับ องค์ประกอบสไตล์ V2, V3 และ V4

เริ่มต้น

การติดตั้ง

เพิ่มแพ็คเกจเป็นการพึ่งพาโครงการของคุณ:

npm install --save styled-modern-normalize

เรียกใช้ npm install จากภายในรูทโครงการเพื่อบูตโครงการและติดตั้งการพึ่งพาการพัฒนาและรันไทม์ โปรดทราบว่า สิ่งนี้จะไม่ติดตั้งแพ็คเกจองค์ประกอบสไตล์ที่ต้องการ ซึ่งกำหนดเป็นการพึ่งพาเพียร์และต้องติดตั้งแยกต่างหากตามที่อธิบายไว้ในส่วนการพึ่งพาของเพียร์ด้านล่าง

การพึ่งพาเพียร์

แพ็คเกจนี้ใช้ฟังก์ชั่น API องค์ประกอบแบบสไตล์ที่ส่งคืนส่วนประกอบของปฏิกิริยา

ดังนั้นแพ็คเกจนี้ขึ้นอยู่กับองค์ประกอบสไตล์และแพ็คเกจตอบสนองที่กำหนดเป็นการพึ่งพาเพียร์

ผู้ใช้ Linux & MacOS สามารถติดตั้งการพึ่งพาเพียร์ทั้งหมดได้อย่างง่ายดายโดยใช้ NPX ซึ่งมาพร้อมกับ NPM 5 หรือสูงกว่า:

npx install-peerdeps styled-modern-normalize

เมื่อใช้ NPM <5 เครื่องมือ NPX ไม่ได้ถูก prebundled แต่ผู้ใช้สามารถติดตั้งได้ทั่วโลกจากนั้นเรียกใช้คำสั่งด้านบนหรือติดตั้งแพ็คเกจติดตั้ง Peerdeps ในเครื่อง/ทั่วโลกเพื่อให้สามารถจัดการการติดตั้งเพียร์ทั้งหมดได้

 # 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

ด้วยตนเอง

การพึ่งพาเพียร์ทั้งหมดยังสามารถติดตั้งด้วยตนเอง (เช่นสำหรับผู้ใช้ที่ใช้ระบบที่ใช้ Microsoft Windows) โดยการติดตั้งเวอร์ชันที่ถูกต้องของแต่ละแพ็คเกจ:

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

การใช้งาน

รูปแบบโมเดิร์น-ธรรมชาติ สามารถใช้งานได้โดยการนำเข้าค่าเริ่มต้นหรือชื่อ Export modernNormalize

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

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

ในการฉีดสไตล์เมื่อใช้ องค์ประกอบสไตล์ V4 ฟังก์ชั่น createGlobalStyle API สามารถใช้งานได้ที่สร้างองค์ประกอบ StyledComponent เข้าถึงของ Component:

 // 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 > ;
/* ... */

เมื่อใช้ องค์ประกอบสไตล์ V2 หรือ V3 รูปแบบสามารถฉีดได้โดยใช้ injectGlobal API:

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

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

รุ่นของ Modern-normalize.css แพ็คเกจนี้ใช้งานอยู่ในปัจจุบันถูกส่งออกเป็น MODERN_NORMALIZE_VERSION :

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

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

เวิร์กโฟลว์การพัฒนา

เรียกใช้ npm install จากภายในรูทโครงการเพื่อบูตโครงการและติดตั้งการพึ่งพาการพัฒนาและรันไทม์ ในการเริ่มต้นการพัฒนาด้วยการคอมไพล์ใหม่โดยอัตโนมัติในการเปลี่ยนแปลงไฟล์แหล่งที่มาใด ๆ ในการรัน src/ ไดเรกทอรี

npm run dev

โครงการยังได้รับการกำหนดค่าสำหรับ Formatter Code ที่มีความคิดเห็นซึ่งให้การสนับสนุนการรวมสำหรับบรรณาธิการจำนวนมากเพื่อจัดรูปแบบไฟล์ต้นฉบับโดยอัตโนมัติบนบันทึก

อาคาร

การสร้างการกระจายสามารถสร้างได้โดยการรัน

npm run dist

การรวมการรวมอย่างต่อเนื่องกำลังทำงานที่ Circle CI และ Travis CI

การทดสอบ

การเป็นผ้าสำลี

แหล่งที่มาของ JavaScript นั้นเป็นผ้าคลุมด้วย ESLINT โดยใช้การกำหนดค่า Arcticicestudio-base ซึ่งสามารถทำงานได้ด้วย

npm run lint:js

แหล่งที่มาของ Markdown นั้นเป็นสิ่งที่น่าสนใจด้วยคำพูดโดยใช้ Preset Arcticicestudio ซึ่งสามารถทำงานได้ด้วย

npm run lint:md

งานผ้าสำลีทั้งหมดสามารถทำงานได้ด้วย

npm run lint

การบริจาค

อ่านคู่มือที่มีส่วนร่วมเพื่อเรียนรู้เกี่ยวกับกระบวนการพัฒนาและวิธีการเสนอคำแนะนำการปรับปรุงและรายงานข้อบกพร่องวิธีการส่งคำขอดึงและสไตล์การจัดการสไตล์ของโครงการองค์กรสาขาและรูปแบบการกำหนดเวอร์ชัน

คู่มือยังรวมถึงข้อมูลเกี่ยวกับตัวอย่างที่น้อยที่สุดสมบูรณ์และตรวจสอบได้และวิธีอื่น ๆ ในการมีส่วนร่วมในโครงการเช่นการปรับปรุงปัญหาที่มีอยู่และให้ข้อเสนอแนะเกี่ยวกับปัญหาและการร้องขอการดึง

ลิขสิทธิ์© 2018-Present Arctic Ice Studio & Sven Greb