React : การกำหนดสไตล์ CSSใน React.js
สวัสดีค่ะทุกคน ในบทความนี้ เราจะมาพูดถึงการกำหนดสไตล์ CSS ร่วมกับ JSX กันค่า โดยจะขอเริ่มต้นด้วยการมาทำความรู้จักเจ้าตัว JSX กันก่อนนะคะ ว่ามันคืออะไร เพื่อเป็นแนวทางให้กับคนที่เริ่มต้นเขียน React กันค่า
JSX หรือ JavaScript XML คือส่วนเสริมของ JavaScript ที่จะทำให้เราสามารถเขียนแท็ก HTML ภายในโค้ดของ JavaScript ได้นั่นเอง
ตัวอย่าง การเขียนแบบ JSX
const helloReact = <h1>Hello React!</h1>
const text = (
<div>
<h1>Hello</h1>
<h4>React</h4>
</div>
)หลังจากที่เราได้ทำความรู้จักกับ JSX ไปคร่าวๆแล้ว เราก็เข้าสู่เนื้อหาหลักที่จะพูดถึงในบทความนี้กันต่อค่า ก็คือการกำหนดสไตล์ CSS นั่นเอง โดยการกำหนดสไตล์ CSS มาใช้ร่วมกับ JSX นั้น จะแบ่งเป็น 2 รูปแบบหลักๆ คือ แบบ Inline Style และ แบบ External Style
- แบบ Inline Style
คือการเขียนโค้ด CSS ไว้ที่แท็ก HTML ซึ่งเราสามารถกำหนดสไตล์ในแบบ object ให้กับแท็กได้โดยตรง
ตัวอย่าง การกำหนดสไตล์ด้วย attribute ที่ชื่อว่า style
<div style={{backgroundColor: 'pink', textAlign: 'center', fontSize: '30px', padding: '10px',}}>
Hello React!
</div>ผลลัพธ์
หรือเราสามารถกำหนดสไตล์ในแบบ object ของ JavaScript โดยจะมีการกำหนดชื่อ property ในแบบ camelCase และค่าของ property จะกำหนดไว้ในเครื่องหมายคำพูด
ตัวอย่าง การกำหนดสไตล์ในแบบ object
const box = {
display: 'inline-block',
backgroundColor: 'pink',
textAlign: 'center',
width: '200px'
}
const text = {
fontSize: '30px',
fontStyle: 'italic',
}return (
<div style={box}>
<h1 style={text}>Hello React!</h1>
</div>
);ผลลัพธ์
ข้อดี
- ง่ายต่อการเขียนโค้ด
- เห็นผลลัพธ์ได้เร็ว
ข้อเสีย
- Reuse และ Maintain ได้ยาก หาก project ของเรามีขนาดใหญ่ขึ้น
- โค้ดจะรกมากขึ้น เพราะโค้ดจะรวมกันอยู่ในไฟล์เดียว ทำให้ไล่อ่านโค้ดได้ลำบาก
2. แบบ External Style
เป็นการแยกส่วนโค้ดของ CSS ไว้ในอีกไฟล์นึง แล้วค่อยใช้คำสั่ง import เพื่อนำเข้าตัวไฟล์ CSS เข้ามาใช้งานใน component ที่ต้องการ โดยจะมีหลักการดังนี้
- สร้างไฟล์ใหม่ โดยให้มีโค้ดส่วนของ CSS อยู่ภายในไฟล์
- หากจะนำไฟล์ CSS ไปใช้งาน ให้ใช้คำสั่ง import ‘./fileName.css’
ตัวอย่าง ไฟล์ของ CSS
.App {
text-align: center;
margin: 25%;
}.title {
font-size: 40px;
font-weight: bold;
}.description {
font-size: 26px;
font-style: inherit;
}
ตัวอย่าง การนำสไตล์มาใช้งาน
import './App.css'function App() {
return (
<div className="App">
<div className="title">Hello World!</div>
<p className="description">I'm pleased to meet you</p>
</div>
);
}ผลลัพธ์
ข้อดี
- Reuse และ Maintain ได้ง่ายกว่า หลักการแบบ Inline Style
- เวลา build มันจะแยกออกมาเป็นไฟล์ CSS และ JSX
- ทำให้ component ของเรา ไม่รก
อีกหนึ่งวิธี ที่เจ้าของบล็อกได้ลองใช้งาน นั่นคือ วิธีแบบ styled-components ค่า ซึ่งเป็น library ตันนึง ที่เราสามารถใส่ style ให้กับ component ที่เราสร้างขึ้นมา และตัว component เหล่านี้ก็สามารถนำไป ใช้ซ้ำต่ออีกได้ค่า
โดยเริ่มแรก เราจะต้องติดตั้งตัว library ก่อนค่ะ โดยใช้คำสั่ง
npm install styled-componentsเมื่อติดตั้ง library แล้ว เราก็มาลุยกันต่อเลยค่า
โดยการใช้งานเจ้าตัว library นี้ ให้ import เข้ามาใช้งานใน component ที่ต้องการได้เลยค่ะ ซึ่งจะใช้คำสั่ง
import styled from 'styled-components'จากนั้นเราก็สามารถสร้าง component ที่เราต้องการและใส่ style ให้กับมันได้เลย
ตัวอย่าง การสร้าง style-component
const Botton = styled.button`
background: green;
border-radius: 10px;
margin: 10%;
padding: 20px;
border: 2px solid green;
color: white;
`ตัวอย่าง การใช้งาน style-component
function App() {
return (
<Botton>Botton</Botton>
);
}เรามาดูโค้ดเต็มๆกันเลย
import styled from 'styled-components';const Botton = styled.button`
background: green;
border-radius: 10px;
margin: 10%;
padding: 20px;
border: 2px solid green;
color: white;
`function App() {
return (
<Botton>Botton</Botton>
);
}export default App;
ผลลัพธ์
ซึ่งประโยชน์ของเจ้าตัวนี้ก็มีเช่นกัน ได้แก่
- Automatic critical CSS : เจ้าตัว library styled-component ตัวนี้ จะสามารถ track ได้ ว่า component อันไหนที่ render บนหน้าจออยู่บ้าง และจะ inject style ของ component นั้นๆ
- No class name bugs : หมดปัญหาในเรื่องของการกำหนดชื่อ class name ที่ซ้ำกัน หรือแม้กระทั่งสะกดชื่อ class name ผิดหรือไม่ตรงระหว่างการนำไปใช้งาน
- Easier deletion of CSS : สามารถลบและจัดการ CSS ได้อย่างง่ายดาย
- Simple dynamic styling : สามารถปรับ style ของ component ได้ง่ายมากขึ้น
- Painless Maintenance : library ตัวนี้ สามารถ maintenance ได้ง่าย เพราะไม่ต้องไปค้นหาไฟล์ style ที่ใช้กับ component ให้ยุ่งยากอีกต่อไป
- Automatic vender prefixing : เจ้า library ตัวนี้ จะจัดการเรื่องของ vender prefixing ให้เองอัตโนมัติ โดยที่เราแค่เขียน CSS ให้ตาม standard เท่านั้นเอง
สรุป
จะเห็นได้ว่าการนำสไตล์มาใช้งานร่วมกับ React นั้นมีหลากหลายวิธีมาก ซึ่งแต่ละวิธีก็มีข้อดีและข้อเสียที่แตกต่างกัน การจะนำวิธีใดๆไปใช้งาน ก็อาจจะพิจารณาตามความเหมาะสมและความถนัดของแต่ละ project และต่อตัวผู้ใช้งานเอง
สำหรับตัวเจ้าของบล็อกนั้น ก็ยังมีอีกหลายวิธีที่ยังไม่เคยลองใช้งาน และต้องไปศึกษาเพิ่มเติมความรู้อีกมาก และในภายภาคหน้า ถ้ามีโอกาสก็จะมาแชร์ความรู้ให้กับทุกคนอีกค่า
ปล. หากมีข้อมูลส่วนไหนที่ผิดไป ข้าพเจ้าขออภัยมา ณ ที่นี้ หากมีข้อมูลส่วนไหนที่ไม่ถูกต้อง ทุกคนสามารถแนะนำเพิ่มเติม และแลกเปลี่ยนความคิดเห็นได้ค่า แล้วเจอกันใหม่ในบทความหน้า ขอบคุณค่า
References
https://blog.2my.xyz/2023/04/22/the-5-ways-tools-for-styling-react-app/
