วิธีการกำหนดสไตล์ให้กับ React components

มีวิธีการมากมายหลายวิธีในการกำหนดสไตล์ให้กับ React components ที่นี่ เราจะพิจารณาวิธีการพื้นฐานบางส่วน

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

แนวทางถัดไป - การกำหนดสไตล์แบบอินไลน์, โดยการใช้มัน เราสามารถเพิ่มสไตล์ CSS แบบอินไลน์ คล้ายกับที่ทำใน HTML ปกติ ใน กรณีนี้ เราจะทำงานกับแอตทริบิวต์ style โดยส่ง คุณสมบัติ CSS ที่จำเป็นให้กับมัน การใช้สไตล์ดังกล่าว ถือเป็นวิธีปฏิบัติที่ไม่ดีและแนะนำให้ใช้ เฉพาะสำหรับการเพิ่มสไตล์ที่คำนวณได้แบบไดนามิก ในระหว่างการแสดงผลเท่านั้น วิธีนี้ ดีสำหรับการสร้างต้นแบบอย่างรวดเร็ว ของอินเทอร์เฟซของคอมโพเนนต์แต่ละตัว

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

วิธีแรก - การใช้ไลบรารี Styled Components ซึ่งใช้สำหรับการกำหนดสไตล์ด้วย เทมเพลตสตริง วิธีนี้ช่วยให้เรา เขียน CSS ปกติในโค้ด JS โดยใช้ฟังก์ชันการทำงานทั้งหมด ของ CSS

วิธีที่สอง - การใช้ CSS Modules ในกรณีนี้ CSS Module คือไฟล์ CSS ที่โดยค่าเริ่มต้นแล้ว ชื่อคลาสทั้งหมดและชื่ออนิเมชัน จะอยู่ในขอบเขตระดับท้องถิ่น นั่นคือสามารถเข้าถึงได้เฉพาะภายในคอมโพเนนต์ ที่ใช้มันเท่านั้น

ในสองวิธีล่าสุดนี้ เราสามารถไม่ต้องกลัว ความขัดแย้งระหว่างชื่อคลาส เพราะชื่อเหล่านั้น มีลักษณะเฉพาะ - ใช้แนวคิดของขอบเขต ระดับท้องถิ่น นอกจากนี้ เมื่อใช้วิธีเหล่านี้ ความจำเป็นในระเบียบวิธี BEM ก็หายไป

ในบทเรียนต่อไป เราจะพิจารณาวิธีการทั้งหมดที่ระบุไว้ ที่นี่โดยละเอียดยิ่งขึ้น