วิธีใช้องค์ประกอบที่มีสไตล์ใน React

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

แก่นแท้ของ CSS คือความสามารถในการกำหนดเป้าหมายองค์ประกอบ HTML ใดๆ — ทั่วโลก — ไม่ว่าตำแหน่งนั้นจะอยู่ในแผนผัง DOM สิ่งนี้อาจเป็นอุปสรรคเมื่อใช้กับส่วนประกอบ เนื่องจากส่วนประกอบต้องการ colocation (เช่น การรักษาทรัพย์สิน เช่น รัฐและการจัดรูปแบบ) ให้ใกล้ตำแหน่งที่ใช้ (เรียกว่าการโลคัลไลเซชัน) ในระดับที่สมเหตุสมผล

ในคำพูดของ React ส่วนประกอบที่มีสไตล์คือ " ภาพพื้นฐานสำหรับส่วนประกอบ " และเป้าหมายของพวกเขาคือการให้วิธีที่ยืดหยุ่นแก่เราในการจัดรูปแบบองค์ประกอบ ผลลัพธ์ที่ได้คือการประกบกันระหว่างส่วนประกอบและสไตล์อย่างแน่นหนา

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

ทำไมต้องเป็นส่วนประกอบที่มีสไตล์?

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

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

การติดตั้ง

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

 yarn add styled-components

… หรือ น.:

 npm i styled-components

เดโมของเราใช้ create-react-app

การเริ่มต้น

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

 import styled from "styled-components"; // Styled component named StyledButton const StyledButton = styled.button` background-color: black; font-size: 32px; color: white; `; function Component() { // Use it like any other component. return <StyledButton> Login </StyledButton>; }

ที่นี่ StyledButton เป็นองค์ประกอบที่มีสไตล์ และจะแสดงเป็นปุ่ม HTML ที่มีสไตล์ที่มีอยู่ styled เป็นวิธีการยูทิลิตี้ภายในที่เปลี่ยนสไตล์จาก JavaScript เป็น CSS จริง

ใน HTML และ CSS ดิบ เราจะมีสิ่งนี้:

 button { background-color: black; font-size: 32px; color: white; } <button> Login </button>

หากองค์ประกอบที่มีสไตล์เป็นส่วนประกอบ React เราสามารถใช้อุปกรณ์ประกอบฉากได้หรือไม่? ใช่เราทำได้

การปรับตัวตามอุปกรณ์ประกอบฉาก

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

 import styled from "styled-components"; const StyledButton = styled.button` min-width: 200px; border: none; font-size: 18px; padding: 7px 10px; /* The resulting background color will be based on the bg props. */ background-color: ${props => props.bg === "black" ? "black" : "blue"; `; function Profile() { return ( <div> <StyledButton bg="black">Button A</StyledButton> <StyledButton bg="blue">Button B</StyledButton> </div> ) }

เนื่องจาก StyledButton เป็นส่วนประกอบ React ที่ยอมรับอุปกรณ์ประกอบฉาก เราจึงสามารถกำหนดสีพื้นหลังที่แตกต่างกันตามการมีอยู่หรือมูลค่าของ bg prop

อย่างไรก็ตาม คุณจะสังเกตเห็นว่าเรายังไม่ได้ระบุ type ปุ่มของเรา มาทำกัน:

 function Profile() { return ( <> <StyledButton bg="black" type="button"> Button A </StyledButton> <StyledButton bg="blue" type="submit" onClick={() => alert("clicked")}> Button B </StyledButton> </> ); }

ส่วนประกอบที่มีสไตล์สามารถแยกความแตกต่างระหว่างประเภทของอุปกรณ์ประกอบฉากที่ได้รับ พวกเขารู้ว่า type นั้นเป็นแอตทริบิวต์ HTML ดังนั้นพวกเขาจึงแสดงผล <button type="button">Button A</button> จริง ๆ ในขณะที่ใช้ bg prop ในการประมวลผลของตนเอง สังเกตว่าเราแนบตัวจัดการเหตุการณ์ด้วยหรือไม่

เมื่อพูดถึงแอตทริบิวต์ ไวยากรณ์เพิ่มเติมช่วยให้เราจัดการอุปกรณ์ประกอบฉากโดยใช้ตัวสร้าง attrs ลองดู:

 const StyledContainer = styled.section.attrs((props) => ({ width: props.width || "100%", hasPadding: props.hasPadding || false, }))` --container-padding: 20px; width: ${(props) => props.width}; // Falls back to 100% padding: ${(props) => (props.hasPadding && "var(--container-padding)") || "none"}; `;

สังเกตว่าเราไม่ต้องการ ternary ในการตั้งค่าความกว้างได้อย่างไร? นั่นเป็นเพราะเราได้ตั้งค่าเริ่มต้นไว้ด้วย width: props.width || "100%", width: props.width || "100%", . นอกจากนี้เรายังใช้คุณสมบัติที่กำหนดเองของ CSS เพราะเราทำได้!

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

ขยายสไตล์

สมมติว่าคุณกำลังทำงานกับหน้า Landing Page และคุณได้ตั้งค่าคอนเทนเนอร์ของคุณให้มีความกว้างสูงสุดที่กำหนดเพื่อให้สิ่งต่างๆ อยู่ตรงกลาง คุณมี StyledContainer สำหรับสิ่งนั้น:

 const StyledContainer = styled.section` max-width: 1024px; padding: 0 20px; margin: 0 auto; `;

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

 const StyledContainer = styled.section` max-width: 1024px; padding: 0 20px; margin: 0 auto; `; const StyledSmallContainer = styled.section` max-width: 1024px; padding: 0 10px; margin: 0 auto; `;

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

 const StyledContainer = styled.section` max-width: 1024px; padding: 0 20px; margin: 0 auto; `; // Inherit StyledContainer in StyledSmallConatiner const StyledSmallContainer = styled(StyledContainer)` padding: 0 10px; `; function Home() { return ( <StyledContainer> <h1>The secret is to be happy</h1> </StyledContainer> ); } function Contact() { return ( <StyledSmallContainer> <h1>The road goes on and on</h1> </StyledSmallContainer> ); }

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

The “as” Polymorphic Prop

ด้วยอุปกรณ์ประกอบฉาก as polymorphic คุณสามารถสลับองค์ประกอบ สุดท้าย ที่ได้รับการแสดงผลได้ กรณีการใช้งานหนึ่งคือเมื่อคุณรับช่วงสไตล์ (ดังในตัวอย่างที่แล้ว) ตัวอย่างเช่น หากคุณต้องการให้ div อยู่ใน section สำหรับ StyledSmallContainer คุณสามารถส่งต่ออุปกรณ์ as ฉากไปยังองค์ประกอบที่มีสไตล์ของคุณด้วยค่าขององค์ประกอบที่คุณต้องการ เช่น:

 function Home() { return ( <StyledContainer> <h1>It's business, not personal</h1> </StyledContainer> ); } function Contact() { return ( <StyledSmallContainer as="div"> <h1>Never dribble when you can pass</h1> </StyledSmallContainer> ); }

ตอนนี้ StyledSmallContainer จะแสดงเป็น div คุณสามารถมีองค์ประกอบที่กำหนดเองเป็นค่าของคุณได้:

 function Home() { return ( <StyledContainer> <h1>It's business, not personal</h1> </StyledContainer> ); } function Contact() { return ( <StyledSmallContainer as={StyledContainer}> <h1>Never dribble when you can pass</h1> </StyledSmallContainer> ); }

อย่าไปถือสา

ไวยากรณ์เหมือน SCSS

CSS ตัวประมวลผลล่วงหน้า Stylis เปิดใช้งานคอมโพเนนต์ที่มีสไตล์เพื่อรองรับไวยากรณ์ที่เหมือน SCSS เช่น การซ้อน:

 const StyledProfileCard = styled.div` border: 1px solid black; > .username { font-size: 20px; color: black; transition: 0.2s; &:hover { color: red; } + .dob { color: grey; } } `; function ProfileCard() { return ( <StyledProfileCard> <h1 className="username">John Doe</h1> <p className="dob"> Date: <span>12th October, 2013</span> </p> <p className="gender">Male</p> </StyledProfileCard> ); }

แอนิเมชั่น

องค์ประกอบที่มีสไตล์มีตัวช่วย keyframes ที่ช่วยในการสร้างคีย์เฟรมภาพเคลื่อนไหว (ใช้ซ้ำได้) ข้อได้เปรียบในที่นี้คือ คีย์เฟรมจะแยกออกจากองค์ประกอบที่มีสไตล์ และสามารถส่งออกและนำกลับมาใช้ใหม่ได้ทุกเมื่อที่ต้องการ

 import styled, {keyframes} from "styled-components"; const slideIn = keyframes` from { opacity: 0; } to { opacity: 1; } `; const Toast = styled.div` animation: ${slideIn} 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; border-radius: 5px; padding: 20px; position: fixed; `;

โกลบอล สไตลลิ่ง

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

 ReactDOM.render( <StyledApp> <App /> </StyledApp>, document.getElementById("root") );

แต่เรามีฟังก์ชันตัวช่วยอยู่แล้ว — createGlobalStyle — ซึ่งเหตุผลเดียวในการดำรงอยู่คือการจัดสไตล์สากล เหตุใดจึงปฏิเสธความรับผิดชอบของมัน?

สิ่งหนึ่งที่เราสามารถใช้ createGlobalStyle ได้คือการทำให้ CSS เป็นปกติ:

 import {createGlobalStyle} from "styled-components"; const GlobalStyle = createGlobalStyle` /* Your css reset here */ `; // Use your GlobalStyle function App() { return ( <div> <GlobalStyle /> <Routes /> </div> ); }

หมายเหตุ: สไตล์ที่สร้างด้วย createGlobalStyle ไม่ยอมรับรายการย่อย เรียนรู้เพิ่มเติมในเอกสารประกอบ

ณ จุดนี้ คุณอาจสงสัยว่าเหตุใดเราจึงควรใช้ createGlobalStlye เลย นี่คือสาเหตุบางประการ:

• เราไม่สามารถกำหนดเป้าหมายสิ่งใดนอกการเรนเดอร์รูทโดยไม่ได้ (เช่น html , body ฯลฯ)
• createGlobalStyle แทรกสไตล์แต่ไม่ได้แสดงองค์ประกอบจริงใดๆ หากคุณดูตัวอย่างสุดท้ายอย่างใกล้ชิด คุณจะสังเกตเห็นว่าเราไม่ได้ระบุองค์ประกอบ HTML ใดๆ ที่จะแสดงผล เป็นเรื่องที่ดีเพราะเราอาจไม่ต้องการองค์ประกอบจริงๆ ท้ายที่สุด เราคำนึงถึงรูปแบบสากล เรากำลังกำหนดเป้าหมายตัวเลือกจำนวนมาก ไม่ใช่องค์ประกอบเฉพาะ
• createGlobalStyle ไม่ได้กำหนดขอบเขตและสามารถแสดงผลได้ทุกที่ในแอปของเรา และจะมีผลตราบเท่าที่อยู่ใน DOM คิดเกี่ยวกับ แนวคิด ไม่ใช่ โครงสร้าง

 import {createGlobalStyle} from "styled-components"; const GlobalStyle = createGlobalStyle` /* Your css reset here */ .app-title { font-size: 40px; } `; const StyledNav = styled.nav` /* Your styles here */ `; function Nav({children}) { return ( <StyledNav> <GlobalStyle /> {children} </StyledNav> ); } function App() { return ( <div> <Nav> <h1 className="app-title">STYLED COMPONENTS</h1> </Nav> <Main /> <Footer /> </div> ); }

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

ระวัง : createGlobalStyles จะแสดงผลก็ต่อเมื่ออยู่ใน DOM

CSS Helper

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

 const StyledTextField = styled.input` color: ${(props) => (props.isEmpty ? "none" : "black")}; `;

ทุกอย่างเป็นไปด้วยดี ต่อจากนั้น หากเราต้องการเพิ่มสถานะอื่น เราต้องแก้ไขรูปแบบของเรา:

 const StyledTextField = styled.input` color: ${(props) => props.isEmpty ? "none" : props.active ? "purple" : "blue"}; `;

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

 const StyledTextField = styled.input` width: 100%; height: 40px; ${(props) => (props.empty && css` color: none; backgroundcolor: white; `) || (props.active && css` color: black; backgroundcolor: whitesmoke; `)} `;

สิ่งที่เราทำคือการขยายรูปแบบ ternary syntax ของเราเพื่อรองรับสไตล์ต่างๆ มากขึ้น และด้วย syntax ที่เข้าใจและเป็นระเบียบมากขึ้น หากคำสั่งก่อนหน้านี้ดูเหมือนผิด อาจเป็นเพราะโค้ดพยายามทำมากเกินไป ลองย้อนกลับไปและปรับแต่ง:

 const StyledTextField = styled.input` width: 100%; height: 40px; // 1. Empty state ${(props) => props.empty && css` color: none; backgroundcolor: white; `} // 2. Active state ${(props) => props.active && css` color: black; backgroundcolor: whitesmoke; `} // 3. Filled state ${(props) => props.filled && css` color: black; backgroundcolor: white; border: 1px solid green; `} `;

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

StyleSheetManager

เช่นเดียวกับตัวช่วย CSS StyleSheetManager เป็นวิธีตัวช่วยสำหรับการปรับเปลี่ยนวิธีการประมวลผลสไตล์ ต้องใช้อุปกรณ์ประกอบฉากบางอย่าง เช่น disableVendorPrefixes (คุณสามารถดูรายการทั้งหมดได้) ซึ่งช่วยให้คุณเลือกไม่ใช้คำนำหน้าผู้ขายจากทรีย่อยได้

 import styled, {StyleSheetManager} from "styled-components"; const StyledCard = styled.div` width: 200px; backgroundcolor: white; `; const StyledNav = styled.div` width: calc(100% - var(--side-nav-width)); `; function Profile() { return ( <div> <StyledNav /> <StyleSheetManager disableVendorPrefixes> <StyledCard> This is a card </StyledCard> </StyleSheetManager> </div> ); }

disableVendorPrefixes จะถูกส่งต่อไปยัง <StyleSheetManager> ดังนั้น คอมโพเนนต์ที่มีสไตล์ที่หุ้มโดย <StyleSheetManager> จะถูกปิดใช้งาน แต่ไม่ใช่องค์ประกอบใน <StyledNav>

แก้จุดบกพร่องได้ง่ายขึ้น

เมื่อแนะนำองค์ประกอบที่มีสไตล์ให้กับเพื่อนร่วมงานคนหนึ่งของฉัน หนึ่งในข้อร้องเรียนของพวกเขาก็คือ เป็นการยากที่จะค้นหาองค์ประกอบที่แสดงผลใน DOM หรือใน React Developer Tools สำหรับเรื่องนั้น นี่เป็นหนึ่งในข้อเสียขององค์ประกอบที่มีสไตล์: ในการพยายามระบุชื่อคลาสที่ไม่ซ้ำ มันจะกำหนดแฮชเฉพาะให้กับองค์ประกอบ ซึ่งเกิดขึ้นเป็นความลับ แต่มันทำให้ displayName สามารถอ่านได้เพื่อการดีบักที่ง่ายขึ้น

 import React from "react"; import styled from "styled-components"; import "./App.css"; const LoginButton = styled.button` background-color: white; color: black; border: 1px solid red; `; function App() { return ( <div className="App"> <LoginButton>Login</LoginButton> </div> ); }

โดยค่าเริ่มต้น ส่วนประกอบที่มีสไตล์จะแสดงผล LoginButton เป็น <button class="LoginButton-xxxx xxxx">Login</button> ใน DOM และเป็น LoginButton ใน React Developer Tools ซึ่งทำให้การดีบักง่ายขึ้น เราสามารถสลับบูลีน displayName ได้หากเราไม่ต้องการพฤติกรรมนี้ สิ่งนี้ต้องมีการกำหนดค่า Babel

หมายเหตุ : ในเอกสารประกอบ มีการระบุแพ็คเกจ babel-plugin-styled-components เช่นเดียวกับไฟล์การกำหนดค่า . .babelrc ปัญหาคือเนื่องจากเราใช้ create-react-app เราจึงกำหนดค่าหลายอย่างไม่ได้เว้นแต่เราจะนำออก นี่คือที่มาโครของ Babel

เราจะต้องติดตั้ง babel-plugin-macros ด้วย npm หรือ Yarn จากนั้นจึงสร้าง babel-plugin-macros.config.js ที่รูทของแอปพลิเคชันของเรา โดยมีเนื้อหา:

 module.exports = { styledComponents: { displayName: true, fileName: false, }, };

เมื่อเปลี่ยนค่า fileName แล้ว displayName จะถูกนำหน้าด้วยชื่อไฟล์เพื่อความแม่นยำที่เป็นเอกลักษณ์มากยิ่งขึ้น

ตอนนี้เราจำเป็นต้องนำเข้าจาก macro :

 // Before import styled from "styled-components"; // After import styled from "styled-components/macro";

บทสรุป

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

แหล่งข้อมูลเพิ่มเติม

1. เอกสารประกอบ ส่วนประกอบที่มีสไตล์
2. “การสร้างระบบส่วนประกอบที่นำกลับมาใช้ใหม่ได้ด้วย React.js และองค์ประกอบที่มีสไตล์”, Lukas Gisder-Dube
3. การใช้กับ Next.js
4. การใช้งานกับ Gatsby