ดาวน์โหลด styled components - styled components ซอร์สโค้ดดาวน์โหลด

styled components

ซอร์สโค้ดอื่น ๆ

v6.1.13

ดาวน์โหลด

ภาพดั้งเดิมสำหรับอายุส่วนประกอบ ใช้บิตที่ดีที่สุดของ ES6 และ CSS เพื่อจัดสไตล์แอพของคุณโดยไม่ต้องเครียด?

การอัพเกรดจาก 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 (สำหรับเว็บ) และ React Native-หมายความว่าเป็นตัวเลือกที่สมบูรณ์แบบแม้สำหรับแอพสากลอย่างแท้จริง! ดูเอกสารเกี่ยวกับ React Native สำหรับข้อมูลเพิ่มเติม

รองรับโดย Front End Center ขอบคุณที่ทำให้สิ่งนี้เป็นไปได้!

เอกสาร

ดูเอกสารที่ styled-components.com/docs สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ styled-components !

QuickLinks ไปยังหน้าเว็บที่มีผู้เยี่ยมชมมากที่สุด:

เริ่มต้น
การอ้างอิง API
การสร้างธีม
การเรนเดอร์ฝั่งเซิร์ฟเวอร์
อธิบายตัวอักษรเทมเพลตที่ติดแท็ก

ตัวอย่าง

 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 >
  ) ;
}

นี่คือสิ่งที่คุณจะเห็นในเบราว์เซอร์ของคุณ:

กำลังมองหา v5?

สาขา 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 )

ผู้มีส่วนร่วม

โครงการนี้มีอยู่ขอบคุณทุกคนที่มีส่วนร่วม [มีส่วนช่วย].

ผู้สนับสนุน

ขอบคุณผู้สนับสนุนของเราทุกคน! [เป็นผู้สนับสนุน]

ผู้สนับสนุน

สนับสนุนโครงการนี้โดยการเป็นสปอนเซอร์ โลโก้ของคุณจะปรากฏขึ้นที่นี่พร้อมลิงค์ไปยังเว็บไซต์ของคุณ [เป็นสปอนเซอร์]

ใบอนุญาต

ดูใบอนุญาตสำหรับข้อมูลเพิ่มเติม

กิตติกรรมประกาศ

โครงการนี้สร้างขึ้นจากงานก่อนหน้านี้โดยคนฉลาดทั่วโลก เราขอขอบคุณ Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik ผู้มีส่วนร่วมแนวคิดรหัสหรือแรงบันดาลใจ

ขอขอบคุณเป็นพิเศษสำหรับ @okonet สำหรับโลโก้ที่ยอดเยี่ยม

ขยาย

ข้อมูลเพิ่มเติม