การจัดสไตล์ด้วย Styled Components ใน React

ในบทเรียนที่ผ่านมา เราได้พิจารณาเทคนิค การจัดสไตล์โดยใช้ CSS แบบโกลบอล และ การจัดสไตล์แบบอินไลน์ ในบทเรียนนี้ เราจะ มาทำงานกับวิธีการที่มีประสิทธิภาพมากขึ้นสำหรับแอปพลิเคชันขนาดใหญ่ นั่นคือ การใช้ไลบรารี styled-components

เอาล่ะ ลองเอากคอมโพเนนต์ที่ไม่มีสไตล์ CSS ซึ่งเราใช้ในบทเรียนที่ผ่านมา มาใช้:

App.jsfunction App() {
  return (
    <div>
      <p>ข้อความ</p>
      <p>ข้อความ</p>
      <p>ข้อความ</p>
    </div>
  );
}

เริ่มต้นด้วยการติดตั้งไลบรารี Styled Components:

terminalnpm install --save styled-components

จากนั้น นำเข้าแพ็คเกจที่ต้องการ ไปยังคอมโพเนนต์ App:

App.jsimport styled from 'styled-components';

ตอนนี้เราสามารถห่อหุ้มแท็กด้วยสไตล์ และนำไปใช้เป็นคอมโพเนนต์ React ได้แล้ว แต่ มีสไตล์ที่แนบมากับ JS โดยตรง วิธีการนี้ยังเรียกว่า CSS ใน JS

ลองมาจัดสไตล์ย่อหน้าแรกกัน สำหรับสิ่งนี้ ก่อนฟังก์ชัน App หลังจากบรรทัดการนำเข้า สร้างคอมโพเนนต์ Text1 ขึ้นมา ในอ็อบเจ็กต์ styled จากไลบรารี เราต้องการย่อหน้า ดังนั้นเราจึงเขียน styled.p จากนั้น ในสตริงเทมเพลต ให้ระบุ สไตล์ CSS ที่เราต้องการ - เหมือนใน CSS ปกติ:

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

อย่างที่คุณเห็น เราใช้ CSS ล้วนๆ ในรูปแบบ สตริงเทมเพลต, ซึ่งสะดวกมาก ในทำนองเดียวกัน เราสามารถ ใช้มีเดียคิวรี, ซูโดเอลิเมนต์ ซีเลกเตอร์ และฟังก์ชันการทำงานอื่นๆ ของ CSS ได้

ตอนนี้ภายในฟังก์ชันคอมโพเนนต์ App ให้แทนที่แท็ก p ด้วยคอมโพเนนต์ที่เราสร้าง Text1 ที่มีสไตล์ CSS:

App.js<Text1>ข้อความ</Text1>     

ในทำนองเดียวกัน จัดสไตล์ ย่อหน้าที่สองและสาม สำหรับสิ่งนี้ สร้างคอมโพเนนต์ Text2 และ Text3:

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

และสุดท้าย จัดสไตล์ div ของเรา สำหรับสิ่งนี้ ให้สร้างคอมโพเนนต์ และตั้งชื่อว่า Container:

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

แทนที่แท็กทั้งหมดของเราด้วย คอมโพเนนต์ที่สร้างขึ้น:

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>ข้อความ</Text1>
      <Text2>ข้อความ</Text2>
      <Text3>ข้อความ</Text3>
    </Container>
  );
}

ด้วยวิธีการนี้ทำให้สามารถ สร้างคอมโพเนนต์ที่ใช้ซ้ำได้ พร้อมกับสไตล์

หากคุณเปิดมาร์กอัปที่สร้างขึ้นในแผง นักพัฒนาของเบราว์เซอร์ คุณจะเห็นว่า แต่ละคอมโพเนนต์มีคลาสเฉพาะตัวของตัวเอง ดังนั้น เราไม่จำเป็นต้องกังวลอีกต่อไป เกี่ยวกับความขัดแย้งระหว่างคลาส ของคอมโพเนนต์แต่ละตัว

ในทำนองเดียวกัน สามารถจัดสไตล์คอมโพเนนต์ได้ โดยใช้ตัวอย่างเช่น ไลบรารี Emotion