สไตล์ของคอมโพเนนต์ Angular
ตอนนี้เรามากำหนดสไตล์ให้กับเลย์เอาต์ของเราโดยใช้
CSS กัน สำหรับสิ่งนี้เราจะต้องใช้ไฟล์
app.component.css ซึ่งเป็นที่ที่เราเขียน
สไตล์ CSS สำหรับเลย์เอาต์ของคอมโพเนนต์ โดยในขณะเดียวกัน
Angular เองจะดูแลให้สไตล์
ทำงานเหมือน CSS Modules นั่นหมายความว่า
ตัวเลือกทั้งหมด (selectors) จะทำงานเฉพาะสำหรับ
เลย์เอาต์ของคอมโพเนนต์นั้นเท่านั้น และจะไม่ส่งผลกระทบต่อ
เลย์เอาต์ภายนอก
เรามาดูกันในทางปฏิบัติ สมมติว่าใน คอมโพเนนต์ของเรามีเลย์เอาต์ดังต่อไปนี้:
<div>
abcde
</div>
เรามากำหนดสีให้กับ div:
div {
color: red;
}
ในขณะเดียวกัน เราสามารถมั่นใจได้ว่า สไตล์จะถูกนำไปใช้เฉพาะกับ div จากคอมโพเนนต์ของเราเท่านั้น และไม่ใช่กับ div อื่นๆ
ให้สร้างเลย์เอาต์บางส่วนในไฟล์เทมเพลต และเขียนสไตล์สำหรับเลย์เอาต์นั้น
