การเปรียบเทียบวิธีการจัดแต่งทรงผมใน Next.js

เผยแพร่แล้ว: 2022-03-10
สรุปโดยย่อ ↬ Next.js ได้ขนานนามตัวเองว่า: The React Framework for Static Websites แต่เช่นเดียวกับเฟรมเวิร์กอื่นๆ ที่มีเป้าหมายเพื่อช่วยคุณสร้างสิ่งที่สำคัญโดยการสรุปงานทั่วไปที่ซ้ำซากจำเจ คุณมักจะต้องเรียนรู้สิ่งใหม่และมีความคิดเห็น ด้วย Next.js สิ่งหนึ่งที่คุณจำเป็นต้องรู้คือการผสานรวมเมธอด CSS ต่างๆ เข้ากับ API ของมันได้อย่างไร และนั่นคือจุดเน้นของบทช่วยสอนนี้

อย่างที่คุณทราบ CSS-in-JS มีมุมมองที่แตกต่างกันมากมาย และเราทุกคนมีความคิดเห็นเกี่ยวกับหัวข้อนี้ไม่ทางใดก็ทางหนึ่งที่อาจแตกต่างไปจากความคิดเห็นของผู้เขียนกรอบงาน

Next.js เป็นหนึ่งในกลุ่มเครื่องมือที่แนะนำเมื่อสร้างแอป React ใหม่ เครื่องมืออย่าง Next มีเป้าหมายง่ายๆ ในการแยกงานที่ซ้ำซากทั่วไปออกไปเมื่อเขียนแอป React ซึ่งช่วยให้นักพัฒนามุ่งเน้นที่การเขียนโค้ดมากกว่าการสร้างวงล้อขึ้นใหม่ แม้ว่านี่จะเป็นสิ่งที่ดี แต่ก็อาจเป็นเรื่องที่น่าเบื่อเล็กน้อยในการเริ่มต้น ประการแรก มีอุปสรรคที่ต้องข้ามโดยการเรียนรู้เกี่ยวกับสิ่งที่เป็นนามธรรม และในขณะที่มีกลุ่มของสิ่งนั้นใน Next (การกำหนดเส้นทาง การดึงข้อมูล…) สิ่งหนึ่งที่มักมองข้ามไปก็คือการจัดแต่งทรงผม

เพื่อให้บริการแก่ผู้ชมที่กว้างขึ้น Next.js รองรับวิธีมากมายในการจัดรูปแบบองค์ประกอบของคุณ ไม่ว่าคุณจะอยู่ในกลุ่มยูทิลิตี้แรกหรือกลุ่ม CSS-in-JS นั้นไม่ใช่ความกังวลของ Next มากนัก ข้อกังวลก็คือคุณจะใส่ตัวเลือกของคุณลงใน API ของมันอย่างไร

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

  1. CSS ทั่วโลก,
  2. SASS/SCSS,
  3. SASS/SCSS ระดับคอมโพเนนต์
  4. CSS ระดับคอมโพเนนต์ (โมดูล CSS)
  5. สไตล์-ส่วนประกอบ,
  6. สไตล์ JSX,
  7. อารมณ์.

วิชาบังคับก่อน

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

  1. _app.js
    นี่คือองค์ประกอบแบบกำหนดเองที่อยู่ในโฟลเดอร์เพจ Next.js ใช้ส่วนประกอบนี้เพื่อเริ่มต้นหน้า
  2. _document.js
    เช่นเดียวกับ _app.js _document.js เป็นองค์ประกอบที่กำหนดเองที่ Next.js ใช้เพื่อเสริมแท็กแอปพลิเคชัน <html> และ <body> นี่เป็นสิ่งจำเป็นเนื่องจากหน้า Next.js ข้ามคำจำกัดความของมาร์กอัปของเอกสารโดยรอบ
  3. _.babelrc
    เมื่อมีอยู่แล้ว Next.js จะใช้ไฟล์นี้เป็นแหล่งความจริงเพียงแหล่งเดียวสำหรับการกำหนดค่าภายในบางอย่าง และให้สิทธิ์คุณในการขยายไฟล์

โปรดทราบว่าหากคุณให้เซิร์ฟเวอร์ของคุณทำงานก่อนที่จะเพิ่มไฟล์ _app.js คุณจะต้องเริ่มต้นใหม่

เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

การสร้างแอปถัดไปด้วย create-next-app

การสร้างแอพ Next ด้วย create-next-app ทำได้ง่าย ๆ ตามขั้นตอนด้านล่าง:

  • ติดตั้ง create-next-app ทั่วโลก
 yarn global add create-next-app // Installs create-next-app globally
  • สร้างแอป Next ใหม่ที่ชื่อ styling-in-next
 create-next-app styling-in-next // Creates a new Next app named styling-in-next
  • เปลี่ยนไดเร็กทอรีเป็นไซต์ใหม่
 cd styling-in-next // Switch directory into the new Next app
  • เรียกใช้เว็บไซต์
 yarn dev -p 3000 // Instruct Next to run on port 3000

โปรดดูเอกสารประกอบสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างและเรียกใช้แอพ Next

แอปควรทำงานบน https://localhost:3000

สกรีนช็อตของหน้าดัชนีเริ่มต้นเริ่มต้นของ Next.js
หน้าดัชนีเริ่มต้นเริ่มต้นของ Next.js (ตัวอย่างขนาดใหญ่)

ที่เก็บตัวอย่าง

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

สกรีนช็อตของชั้นวางหนังสือสไตล์เดโมขั้นสุดท้าย
ชั้นวางหนังสือสไตล์สุดท้าย (ตัวอย่างขนาดใหญ่)

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

เพื่อทำให้ทุกอย่างง่ายขึ้น ฉันได้รวบรวมที่เก็บ GitHub เพื่อให้คุณปฏิบัติตาม คุณสามารถคว้ามันได้ที่นี่

มีการเปลี่ยนแปลงบางอย่างกับตัวเริ่มต้นเริ่มต้นที่สร้างโดย create-next-app โฟลเดอร์ต่างๆ เช่น อารมณ์ , ทั่วโลก , โมดูล , ส่วนประกอบที่มีสไตล์ ฯลฯ ได้ถูกเพิ่มไปยังโฟลเดอร์ styles — ด้วยไฟล์สไตล์ที่สอดคล้องกัน — เช่นเดียวกับไดเร็กทอรี components ที่มีหลายองค์ประกอบ

สกรีนช็อตของการเปลี่ยนแปลงเริ่มต้นที่ทำกับไดเร็กทอรีของที่เก็บตัวอย่างและส่วนประกอบ
การเปลี่ยนแปลงในโฟลเดอร์สไตล์และส่วนประกอบ (ตัวอย่างขนาดใหญ่)

ไฟล์ index.js ได้รับการแก้ไขเพื่อ import และ render ส่วนประกอบที่จำเป็น และ components แต่ละส่วนมีโครงสร้างที่คล้ายกันดังแสดงในภาพด้านล่าง

สกรีนช็อตของการเปลี่ยนแปลงครั้งแรกที่ทำกับ BookTwo.js, BookOne.js และ index.js
การเปลี่ยนแปลงแต่ละองค์ประกอบและไฟล์ดัชนี (ตัวอย่างขนาดใหญ่)

หากคุณโคลนและเรียกใช้ที่เก็บตัวอย่าง หน้าของคุณควรมีลักษณะดังนี้:

สกรีนช็อตของหน้าดัชนีเริ่มต้นจากที่เก็บตัวอย่าง
หน้าดัชนีเริ่มต้นจาก repo สาธิต (ตัวอย่างขนาดใหญ่)

เท่านี้ก็เรียบร้อย มาจัดแต่งทรงผมกันเถอะ

สไตล์สากล

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

  • อัปเดต styles/global/globals.css ด้วยการรีเซ็ต Minimal CSS ที่ขยายเพิ่มนี้
 /* styles/global/globals.css */ html { box-sizing: border-box; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; }
  • นำเข้า CSS reset styles/global/globals.css ใน pages/_app.js
 // pages/_app.js import "../styles/global/globals.css"; function MyApp({Component, pageProps}) { return <Component {...pageProps} />; } export default MyApp;

สไตล์สากลสามารถนำเข้าได้ใน pages/_app.js เท่านั้น นี่เป็นเหตุผลโดยตรงเพราะสไตล์เหล่านี้จะใช้กับทุก pages และ components ในแอปพลิเคชันของคุณ ไม่ว่าคุณจะนำเข้าจากที่ใด ดังนั้นจึงเป็นการดีกว่าที่จะมี [นำเข้า] ความจริงเพียงแหล่งเดียวเพื่อให้สิ่งต่าง ๆ ตรงไปตรงมา และ/หรือหากมีสิ่งใดเกิดขึ้น ผิด.

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

สกรีนช็อตของการเปลี่ยนแปลงไปยังชั้นวางหนังสือสาธิตหลังจากเพิ่มการรีเซ็ต CSS
การเปลี่ยนแปลงในหน้าดัชนีหลังจากเพิ่มการรีเซ็ต CSS (ตัวอย่างขนาดใหญ่)

SASS/SCSS

Next.js ยังอนุญาตให้ใส่สไตล์ด้วย SASS ด้วยนามสกุล . .scss หรือ . .sass การติดตั้ง Sass เป็นข้อกำหนด เช่นเดียวกับสไตล์สากล นำเข้าได้ใน pages/_app.js เท่านั้น

  • ติดตั้งแพ็คเกจ Sass
 yarn add sass
  • อัปเดต styles/scss/bookshelf.scss
 // styles/scss/bookshelf.scss .the-bookshelf { width: 100vw; height: 100vh; background-color: #e3e3e3; display: flex; justify-content: center; align-items: center; .bookshelf-wrap { > .bookshelf { box-shadow: inset 0 -20px #7b5019; padding-bottom: 20px; display: flex; align-items: flex-end; } [class*="book"] { font-size: 32px; letter-spacing: -0.045em; display: flex; transition: 0.2s; &:hover { transform: none; } } .book-info { text-transform: uppercase; writing-mode: sideways-rl; display: flex; justify-content: space-around; flex: 1; align-items: center; font-weight: bold; padding: 16px 0; .title { font-weight: inherit; font-size: 20px; } .author { font-weight: inherit; font-size: 15px; } } } }
  • อัปเดต styles/sass/bookone.sass และ styles/sass/booktwo.sass เช่นกัน:
 // styles/sass/bookone.sass .book-one color: #f00 width: 78px height: 350px transform: rotate(-4deg) margin-left: 16px margin-right: 23px background-color: black
 // styles/sass/booktwo.sass .book-two color: #781e0b width: 38px height: 448px margin-right: 23px background-color: #ffab44

SASS ( .sass ) ขึ้นอยู่กับการเยื้อง เพื่อให้การจัดรูปแบบง่ายขึ้น คุณสามารถติดตั้ง VSCode Extension สำหรับไฟล์ SASS ที่รองรับ (การจัดรูปแบบ การเน้นไวยากรณ์…)

  • นำเข้าไฟล์สไตล์สามไฟล์ — styles/scss/bookshelf.scss , styles/sass/bookone.sass และ styles/sass/booktwo.sass — ใน pages/_app.js
 // pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass"; function MyApp({Component, pageProps}) { return ; } export default MyApp; // pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass"; function MyApp({Component, pageProps}) { return ; } export default MyApp;

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

สกรีนช็อตของการเปลี่ยนแปลงไปยังชั้นวางหนังสือสาธิตหลังจากจัดแต่งทรงผมหนังสือเล่มแรกและเล่มที่สองด้วยSASS
BookOne และ BookTwo สไตล์ SASS (ตัวอย่างขนาดใหญ่)

โมดูล CSS

โมดูล CSS เป็น CSS ระดับคอมโพเนนต์ที่มาพร้อมกับ Next และสามารถเปิดใช้งานได้โดยการตั้งชื่อไฟล์สไตล์ด้วยนามสกุล . .module.css นอกจากนี้ยังสามารถใช้โมดูล CSS กับ SASS/SCSS ที่มีนามสกุล . .module.sass หรือ . .module.scss

มากำหนดสไตล์ให้กับ components/BookThree.js ด้วยมัน

  • อัปเดต styles/modules/BookThree.module.css
 /* styles/modules/BookThree.module.css */ .book-three { color: #df66c3; width: 106px; height: 448px; margin-right: 23px; background-color: #153086; transform: rotate(-4deg); }
  • นำเข้า styles/modules/BookThree.module.css ใน components/BookThree.js และใช้คลาส . .book-three
 // components/BookThree.js import BookThreeStyles from "../styles/modules/BookThree.module.css"; export default function BookThree() { return ( <div className={BookThreeStyles["book-three"]}> <div className="book-info"> <p className="title">the revolt of the public</p> <p className="author">Martin Gurri</p> </div> </div> ); }

การเข้าถึงชื่อคลาสในโมดูล CSS นั้นคล้ายกับตัวเข้าถึงคุณสมบัติใน JavaScript — ด้วยเครื่องหมายจุดหรือวงเล็บ ที่นี่เรานำเข้า BookThreeStyles แล้วใช้เครื่องหมายวงเล็บเพื่อใช้สไตล์ที่เรามีในไฟล์ styles/modules/BookThree.module.css

หากตัวเลือก (ในกรณีนี้คือชื่อคลาส) เข้าถึงได้อย่างเหมาะสม หนังสือเล่มที่สามควรได้รับการจัดรูปแบบแล้ว

สกรีนช็อตของการเปลี่ยนแปลงไปยังชั้นวางหนังสือสาธิตหลังจากจัดสไตล์หนังสือเล่มที่สามด้วย CSS Modules
BookThree สไตล์ด้วยโมดูล CSS (ตัวอย่างขนาดใหญ่)

อารมณ์

อารมณ์คือไลบรารี CSS-in-JS และเหมือนกับ CSS-in-JS อื่น ๆ ที่ให้คุณเขียนสไตล์ CSS ด้วย JavaScript

มากำหนดสไตล์ให้กับ components/BookFour.js ด้วยมัน

  • ติดตั้งแพ็คเกจ: @emotion/core , @emotion/styled , emotion , emotion-server
 yarn add @emotion/core @emotion/styled emotion emotion-server
  • อัปเดต styles/emotion/StyledBookFour.js
 // styles/emotion/StyledBookFour.js import styled from "@emotion/styled"; export const StyledBookFour = styled.div` color: white; width: 38px; height: 400px; margin-left: 20px; margin-right: 10px; background-color: #2faad2; transform: rotate(4deg); `;

หลังจากนำเข้า styled จาก @emotion/styled เราจะส่งออกองค์ประกอบที่ มีสไตล์ StyledBookFour — เพื่อไม่ให้สับสนกับ CSS-in-JS Styled Component อื่นๆ — ปรับปรุงด้วยวิธีอารมณ์ที่ styled เช่นเดียวกับใน styled.div จากนั้นเราก็สามารถใช้ <StyledBookFour/> ในขั้นตอนต่อไปด้านล่าง

เรียนรู้เพิ่มเติมเกี่ยวกับฟังก์ชันที่มีสไตล์ของอารมณ์

  • การใช้ <StyledBookFour/> จะคล้ายกับที่คุณใช้ส่วนประกอบ React อื่นๆ นำเข้า styles/emotion/StyledBookFour.js ใน components/BookFour.js และใช้องค์ประกอบ StyledBookFour
 // components/BookFour.js import {StyledBookFour} from "../styles/emotion/StyledBookFour"; export default function BookFour() { return ( <StyledBookFour className="book-four"> <div className="book-info"> <p className="title">the man died</p> <p className="author">wole soyinka</p> </div> </StyledBookFour> ); }

ด้วย อารมณ์ที่เพียงพอ หนังสือเล่มที่สี่จึงควรมีการจัดรูปแบบ

สกรีนช็อตของการเปลี่ยนแปลงการสาธิตชั้นวางหนังสือหลังจากจัดแต่งทรงผมหนังสือเล่มที่สี่ด้วย Emotion
BookFour สไตล์ด้วยอารมณ์ (ตัวอย่างขนาดใหญ่)

สไตล์ JSX

เช่นเดียวกับ Global CSS และ CSS-Modules Styled-JSX ทำงานร่วมกับ Next.js โดยไม่ต้องตั้งค่าเพิ่มเติมใดๆ ถ้ามันช่วยได้ Styled-JSX ก็เป็นข้อเสนอของ Vercel เกี่ยวกับ CSS แบบคอมโพเนนต์ ซึ่งเป็นผู้สร้าง Next.js คนเดียวกัน

มากำหนดสไตล์ให้กับ components/BookFive.js ด้วยมัน

เพื่อให้ง่ายขึ้น เราใช้โหมดภายในของ styled-jsx ที่นี่ ด้วยการส่ง jsx prop ไปยังองค์ประกอบ <style/> เราสามารถเขียน CSS ได้มากเท่าที่เราต้องการเหมือนกับที่เราทำกับ .book-five โดยมีประโยชน์เพิ่มเติมของสไตล์ที่แปลเป็นภาษาท้องถิ่นไปยังองค์ประกอบ <BookFive/>

 // components/BookFive.js export default function BookFive() { return ( <div className="book-five"> <div className="book-info"> <p className="title">there was a country</p> <p className="author">Chinua Achebe</p> </div> <style jsx>{` .book-five { color: #fff; width: 106px; height: 448px; margin-right: 23px; background-color: #000; transform: rotate(4deg); } `}</style> </div> ); }

และเช่นเดียวกัน หนังสือเล่มที่ห้าก็มีสไตล์ของมัน

สกรีนช็อตของการเปลี่ยนแปลงไปยังชั้นวางหนังสือสาธิตหลังจากจัดแต่งทรงผมหนังสือเล่มที่ห้าด้วย Styled JSX
BookFive มีสไตล์ด้วย JSX ที่มีสไตล์ (ตัวอย่างขนาดใหญ่)

ส่วนประกอบที่มีสไตล์

Styled-Component เช่นเดียวกับ Emotion ยังเป็นไลบรารี CSS-in-JS ที่ให้คุณเขียนสไตล์ CSS ด้วย JavaScript ได้อีกด้วย การติดตั้งมีส่วนเกี่ยวข้องเล็กน้อย

  • ขั้นแรก ติดตั้ง babel-plugin-styled-components และ styled-components
 yarn add babel-plugin-styled-components styled-components
  • สร้างไฟล์ .babelrc ที่รูทของแอป และไฟล์ pages/_document.js ดังที่แสดงในภาพก่อนหน้า (ซ้าย) และหลัง (ขวา) ด้านล่าง
ภาพหน้าจอของการเปลี่ยนแปลงในชั้นวางหนังสือสาธิตหลังจากเพิ่มไฟล์ใหม่ 2 ไฟล์ - <code>_.document.js</code> และ <code>.babelrc</code>
เพิ่มไฟล์ใหม่: _document.js และ . .babelrc (ตัวอย่างขนาดใหญ่)
  • อัปเดตไฟล์ .babelrc เพื่อรวมพรีเซ็ต next/babel และรวมปลั๊กอิน styled-components โดยเปิดใช้งานการแสดงผลฝั่งเซิร์ฟเวอร์ (ssr)
 // .babelrc { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true } ] ] }
  • อัปเดต pages/_document.js โดย ใส่สไตล์ที่แสดงผลฝั่งเซิร์ฟเวอร์ลงใน <head>

โปรดทราบว่าตัวอย่างด้านล่าง ( pages/_document.js ) เป็นตรรกะ ที่จำเป็น สำหรับองค์ประกอบที่มีสไตล์เพื่อทำงานกับ Next.js คุณแทบไม่ต้องทำ อะไรเลย นอกจากคัดลอกตรรกะตามที่ระบุไว้ในเอกสารประกอบที่มีสไตล์

 // pages/_document.js import Document from "next/document"; import {ServerStyleSheet} from "styled-components"; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } } }

หลังจากอัปเดต .babelrc และ pages/_document.js แล้ว เราก็เริ่มใช้ styled-components ได้แล้ว

  • อัปเดต styles/styled-components/StyledBookSix.js

styled เป็นวิธีการยูทิลิตี้ภายในที่เปลี่ยนสไตล์จาก JavaScript เป็น CSS จริง <StyledBookSix/> คือ และสามารถใช้เป็นส่วนประกอบ React อื่นๆ ได้

 // styles/StyledBookSix.js import styled from "styled-components"; const StyledBookSix = styled.div` color: #fff; width: 106px; height: 448px; margin-right: 23px; background-color: rebeccapurple; `; export default StyledBookSix;

เรียนรู้เพิ่มเติมเกี่ยวกับวิธีใช้ Styled-Components ใน React

  • นำเข้า styles/styled-components/StyledBookSix.js ใน components/BookSix.js โดยใช้ styled-components <StyledBookSix/> ที่นำเข้า
 // components/BookSix.js import StyledBookSix from "../styles/styled-components/StyledBookSix"; export default function BookSix() { return ( <StyledBookSix className="book-six"> <div className="book-info"> <p className="title">purple hibiscus</p> <p className="author">chimamanda ngozi adichie</p> </div> </StyledBookSix> ); }

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

สกรีนช็อตของการเปลี่ยนแปลงไปยังชั้นวางหนังสือสาธิตหลังจากจัดแต่งทรงผมหนังสือเล่มที่หกด้วยส่วนประกอบที่มีสไตล์
BookSix สไตล์ด้วยองค์ประกอบที่มีสไตล์ (ตัวอย่างขนาดใหญ่)

แค่นั้นแหละ.

หากทุกอย่างเป็นไปด้วยดี คุณควรมีชั้นวางหนังสือพร้อมหนังสือรออ่าน

  • คุณสามารถคว้ารหัสที่สมบูรณ์บน GitHub →

บทสรุป

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

ทรัพยากร

ฉันพบว่าสำหรับการเรียนรู้เกี่ยวกับการตั้งค่าวิธีการจัดสไตล์ด้วย Next.js ไม่มีที่ไหนดีไปกว่าเอกสารอย่างเป็นทางการ

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

  1. Tailwind CSS
  2. โมดูล CSS
  3. น้อย
  4. สไตลัส
  5. Tailwind CSS พร้อมอารมณ์
  6. Styletron
  7. เสน่ห์
  8. CXS
  9. อะโฟรไดท์
  10. เฟลา
  11. สไตล์-JSX