Next.js - Hỗ trợ CSS
Trong Next.js, chúng ta có thể sử dụng thư viện css-in-js inbuild có tên là styled-jsx. Nó cho phép viết css trong một thành phần phản ứng và các kiểu này sẽ được xác định phạm vi thành phần.
Trong ví dụ này, chúng ta sẽ tạo một đối tượng Container sẽ được sử dụng để tạo kiểu cho các thành phần khác bằng cách chứa chúng.
Hãy cập nhật dự án nextjs được sử dụng trong chương Meta Data .
Đầu tiên hãy tạo một thư mục Thành phần ở cấp cơ sở và thêm một tệp chứa .module.css như sau:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
border: 1px solid red;
}Tạo tệp containerner.js trong thư mục Thành phần
import styles from './container.module.css'
function Container({ children }) {
return <div className={styles.container}>{children}</div>
}
export default ContainerBây giờ sử dụng thành phần Container trong first.js.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost() {
return (
<>
<Container>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</Container>
</>
)
}Khởi động Máy chủ Next.js
Chạy lệnh sau để khởi động máy chủ -.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfullyXác minh đầu ra
Mở localhost: 3000 trong trình duyệt và chuyển đến bài viết đầu tiên, bạn sẽ thấy kết quả sau.
