วิธีจัดรูปแบบ React Components ด้วย CSS

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

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

หรือคุณสามารถใช้ชุดยูทิลิตี้ เช่น Tailwind UI ซึ่งมาพร้อมกับสไตล์ที่สร้างไว้ล่วงหน้า หากคุณต้องการสร้างม็อคอัพหรืองานนำเสนอ ชุด UI ที่เป็นมิตรต่อปฏิกิริยาคือคำตอบ

จัดสไตล์ที่ใช้งานได้จริงด้วย className

ใน React สไตล์ CSS ที่ใช้งานได้จริงจะถูกนำไปใช้ผ่านคุณสมบัติ className

ซึ่งเทียบเท่ากับการใช้สไตล์ชีตสำหรับโครงการของคุณ เนื่องจาก React ถูกขับเคลื่อนโดยโครงสร้างส่วนประกอบ คุณสามารถนำเข้าสไตล์ชีตของคุณสำหรับความต้องการเฉพาะเท่านั้น

มาดูตัวอย่างกัน

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

และนี่จะเป็นผลลัพธ์:

เป็นเทคนิควานิลลาที่ถูกต้องสมบูรณ์ และมักใช้เพื่อประกาศตัวแปรส่วนกลางที่คุณจะใช้ซ้ำในองค์ประกอบหลัก

ข้อแม้เพียงอย่างเดียวคือเมื่อโครงการของคุณเติบโตขึ้น โอกาสในการตั้งชื่อความขัดแย้งก็เพิ่มขึ้นเช่นกัน

ในทำนองเดียวกัน ค่าใช้จ่ายในการจัดการสไตล์ชีตนับร้อยนั้นก็สูงอย่างไร้เหตุผลเช่นกัน

การใช้ JSX สำหรับสไตล์อินไลน์

React ให้คุณจัดสไตล์องค์ประกอบ DOM โดยใช้สไตล์อินไลน์ แม้ว่าตรรกะ CSS จะยังคงเหมือนเดิม แต่สไตล์ต้องผ่าน JavaScript สิ่งนี้เรียกอีกอย่างว่า JSX

ลองดูตัวอย่าง:

Headline.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

สิ่งหนึ่งที่คุณจะสังเกตได้ก็คือแทนที่จะเขียน line-height เราใช้ lineHeight

คำอธิบายสำหรับเรื่องนี้คือ "เนื่องจาก JSX ใกล้เคียงกับ JavaScript มากกว่า HTML, React DOM จึงใช้หลักการตั้งชื่อคุณสมบัติ camelCase แทนชื่อแอตทริบิวต์ HTML" .

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

การสร้างขอบเขตท้องถิ่นด้วยโมดูล CSS

หากคุณต้องการนำสไตล์ที่กำหนดเองไปใช้กับส่วนประกอบโดยไม่ต้องตั้งชื่อการชนกัน วิธีหนึ่งที่จะทำคือผ่านโมดูล CSS

นี่เป็นแนวทางที่คุณสามารถใช้ขอบเขตท้องถิ่นกับแต่ละองค์ประกอบแยกกันได้

ชอบดังนั้น:

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

คุณยังสามารถทำสิ่งต่างๆ เช่น การ แต่งเพลง โดยที่คุณเรียกสไตล์เฉพาะจากสไตล์ชีตอื่น โดยไม่ต้องเขียนตรรกะเดิมซ้ำสองครั้ง

 .header { composes: header from './style.css'; }

CSS ใน JS

ไม่เหมือนกับเฟรมเวิร์กอย่าง Vue และ Svelte React ไม่ได้จัดเตรียมอินเทอร์เฟซสำหรับสไตล์ของตัวเอง

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

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

โซลูชันยอดนิยมสำหรับ CSS ใน JS คือ Styled Components

และตัวเลือกที่โดดเด่นอื่นๆ ได้แก่ Emotion และ Linaria เพื่อการสาธิต มาดูกันว่า CSS ถูกรวมเข้ากับองค์ประกอบ React โดยใช้ไลบรารี Styled Components อย่างไร

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

ขั้นแรก เราสร้างองค์ประกอบใหม่ที่เรียกว่า HeaderWrapper ซึ่งจะแสดงคอนเทนเนอร์ <section> สำหรับชื่อส่วนหัวของเรา จากนั้นเราสร้างองค์ประกอบอื่นที่เรียกว่า HeaderTitle และส่งผ่านตัวแปร CSS ไปที่มัน ในทางหนึ่ง มันก็เหมือนกับการทำงานกับ Web Components เฉพาะในบริบทของ React เท่านั้น

การใช้กรอบงาน CSS

ไม่ใช่ว่าทุกอย่างใน front-end กำลังมุ่งสู่เฟรมเวิร์กและไลบรารี

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

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

ดังนั้น แทนที่จะกำหนดรูปแบบองค์ประกอบโดยใช้ค่า คง ที่ เราสามารถเขียนรูปแบบตามที่กำหนดโดยกรอบงานได้โดยตรง วิธีการเช่นนี้มีประสิทธิภาพอย่างยิ่ง ตัวอย่างเช่น คุณสามารถนำเข้าส่วนประกอบ UI (เช่น การ์ด) ที่ผู้อื่นสร้างขึ้น

Tailwind CSS ได้รับความนิยมเป็นพิเศษ เนื่องจากคุณสามารถคัดลอกและวางตัวอย่างได้โดยตรง และใช้ในงานออกแบบแอปของคุณโดยไม่มีผลกระทบใดๆ

การใช้ไลบรารี UI

วิธีสุดท้ายสำหรับการกำหนดสไตล์ส่วนประกอบ React คือการใช้ไลบรารี UI ไลบรารี UI ต่างจากเฟรมเวิร์กตามแนวทางสไตล์ มันมาพร้อมกับสไตล์ที่กำหนดไว้แล้วในหลายๆ ด้าน ไลค์ของ Mantine และ Material UI เป็นตัวเลือกที่น่าสนใจ

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