หากเป็นมือใหม่ พึ่งหัดใช้ Fluent UI ผมจะมาแนะนำ วิธีการปรับ styles ของ component ให้ดูเป็นตัวอย่างแบบง่ายๆกัน
เริ่มแรกผมจะใช้ PrimaryButton ที่ fluent UI ให้มา
![](https://www.frevation.com/wp-content/uploads/2023/02/image-1024x115.png)
ปรับ style ของ component จะสังเกตว่า มี style กับ styles
![](https://www.frevation.com/wp-content/uploads/2023/02/image-1.png)
ความต่าง คือ
Style: จะใช้เหมือนกับ element ทั่วไป เช่น div span input และอื่นๆ
Styles: จะเป็น property ที่ทุก component ของ fluent UI ให้มา เนื่องจาก component แต่ละตัวของ fluent UI จะประกอบไปด้วยหลายๆ element รวมกัน styles นี้จะสามารถปรับแต่ละ element ของ component ได้
ถ้าเราลองใช้ style มาเปลี่ยน background เป็นสีแดง
![](https://www.frevation.com/wp-content/uploads/2023/02/image-2.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-5-1024x100.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-6.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-4.png)
เปลี่ยนสีตัวหนังสือเป็นสีเขียว และปรับ padding
![](https://www.frevation.com/wp-content/uploads/2023/02/image-3.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-7-1024x178.png)
จะเห็นว่า style ปรับได้ตามปกติ
ทีนี้มาดู styles บ้าง ถ้าเราลอง ctrl + spacebar ดู จะเห็นว่าด้านในจะมี property ให้ใช้เยอะมาก
![](https://www.frevation.com/wp-content/uploads/2023/02/image-20.png)
ผมจะลองทำเหมือนแบบเดิมด้วย styles ดู โดยผมจะเลือก root เป็น property
![](https://www.frevation.com/wp-content/uploads/2023/02/image-20.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-13.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-16-1024x170.png)
จะเห็นว่าได้เหมือนกันเลย
แล้วเราจะรู้ได้อย่างไรว่า แต่ละ property ปรับตรงไหนได้
ให้ลองไปที่ Inspect => element ดู สังเกตชื่อ class ของ element ด้านใน primaryButton จะเห็นตรงที่ขีดเส้นสีแดงในรูป
![](https://www.frevation.com/wp-content/uploads/2023/02/image-20.png)
ทีนี้ผมจะเปลี่ยน สีด้านใน flexContainer ดู
![](https://www.frevation.com/wp-content/uploads/2023/02/image-14-1024x44.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-17-1024x100.png)
ต่อไป ผมจะลองเปลี่ยน style ของ ปุ่มที่ disabled ไว้
![](https://www.frevation.com/wp-content/uploads/2023/02/image-15.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-18-1024x111.png)
ถ้าเราใช้ style แบบปกติก็จะเขียนแบบในรูป ก็คือเหมือน condition rendering
![](https://www.frevation.com/wp-content/uploads/2023/02/image-19-1024x81.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-8-1024x108.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-7-1024x178.png)
ถ้าเราใช้เป็น styles แทน เราก็จะได้ไม่ต้องเขียน condition rendering แล้ว
![](https://www.frevation.com/wp-content/uploads/2023/02/image-9.png)
ใช้ rootDisabled เป็น property หลัก
![](https://www.frevation.com/wp-content/uploads/2023/02/image-10-1024x36.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-11-1024x116.png)
![](https://www.frevation.com/wp-content/uploads/2023/02/image-12-1024x102.png)
นี่เป็นวิธีปรับ styles แบบง่ายๆ หากท่านใช้งาน fluent UI เป็นหลัก ทุก component นั้นจะใช้ styles property ได้หมด สามารถดูเพิ่มเติมอย่างละเอียดได้ที่เว็ปของ Fluent UI
ผู้เขียน Tanapat Limtemsap
วันที่ 3 กุมภาพันธ์ พ.ศ.2566