Style CSS trong Next.js

Next.js cung cấp nhiều cách để thêm style CSS trong ứng dụng của bạn bao gồm cả thêm style từ class hay CSS in JS

Trong hướng dẫn này, bạn sẽ khám phá một số cách để thêm Style trong ứng dụng Next.js của mình.

Sử dụng global CSS trong Next.js

Cách dễ nhất để viết CSS trong ứng dụng Next.js là thông qua global CSS của nó. Mỗi dự án Next.js mới được tạo đều đi kèm với một styles/global.css .

Do đó, bạn có thể bắt đầu viết CSS ngay lập tức mà không cần thiết lập gì cả, ví dụ như

.paragraph {
    font-size: 16px;
    text-align: center;
    color: blue;
}

.paragraph:hover {
    font-size: 16px;
    color: red;
}

File global.css sẽ được áp dụng cho toàn bộ ứng dụng của bạn khi bạn import vào trong file _app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Giờ bạn chỉ cần thêm className="paragraph" vào trong ứng dụng của mình là xong, ví dụ như ở home component

export default function Home() {
    return (
      <p className="paragraph">I am styled with a global css stylesheet</p>
    )
  }

Ưu điểm của phương pháp này là :

Không cần thiết lập gì
Phù hợp với các dự án nhỏ

Nhược điểm:

Tất cả các style phải dùng chung file, sẽ khá nặng nề khi vào dự án lớn
Khó có thể mở rộng quy mô khi càng ngày càng lớn

Sử dụng CSS modules với Next.js

Next.js còn có hỗ trợ thêm style theo từng component gọi là CSS modules, nó là một file đặt biệt với đuôi .module.css giúp bạn chia CSS để quản lý dễ dàng. Ví dụ trong component Home, bạn tạo một file Home.module.css

//Home.module.css
.paragraph {
    font-size: 16px;
    text-align: center;
    color: blue;
}

.paragraph:hover {
    font-size: 16px;
    color: red;
}

Sau đó import vào component của mình

import styles from '../styles/Home.module.css'
export default function Home() {
   return (
     <p className={styles.paragraph}>I am styled with CSS modules</p>
   )
 }

Ưu điểm:

Cũng không cần setup
Phân chia CSS theo từng component
Có thể sử dụng chung với global.css
Hạn chế sự conflict giữa các class

Nhược điểm:

Style không có dynamic

Sử dụng Next.js với Sass

Nếu CSS không hài lòng với bạn, có thể sử dụng framework CSS là Sass - CSS with superpowers.

Để cài đặt Sass, dùng lệnh

   npm install sass
    # or
    yarn add sass

Để bắt đầu với scss, bạn tạo file Home.module.scss

//Home.module.scss
$hover-color: red;

.paragraph {
    font-size: 16px;
    text-align: center;
    color: blue;
}

.paragraph:hover {
   font-size: 18px;
   color: $hover-color;
}

Tương tự như Home.module.css, ta hãy import vào component


import styles from '../styles/Home.module.scss'
export default function Home() {
  return (
    <p className={styles.paragraph}>I am styled with SASS</p>
  )
}

Ưu điểm:

Dễ dàng cài đặt
CSS tương thích mọi thiết bị
Các tính năng thú vị của Sass

Nhược điểm:

Phải dành thừoi gian học Scss

Sử dụng Styled-JSX trong Next.js

Next.js - cho phép cho các nhà lập trình viên viết Styled-JSX, viết CSS vào trong JavaScript của họ Styled-JSX mà không cần thiết lập bất cứ gì. Ví dụ:

export default function Home() {
    return (
      <div className="paragraph">
        <style jsx>{`
            .paragraph {
                font-size: 16px;
                text-align: center;
                color: blue;
            }

            .paragraph:hover {
                color: red;
            }
        `}</style>
        <p>I am a component styled with Styled-JSX</p>
      </div>
    )
  }

Ưu điểm:

Không cần thiết lập
Có thể viết Dynamic style
Chứa cùng một file nên linh động khi di chuyển

Nhược điểm:

Để chung nên dễ nhầm lẫn nếu không quen
Ít người dùng phương pháp này nên ít có hỗ trợ hơn
Khó debug hơn

Sử dụng styled-components trong next.js

Styled-components rất hữu dụng bởi nó được xây dựng dành riêng cho React. Nó cho phép lập trình viên tạo các component và ịnected style vào trong nó.

Styled-components sử dụng props để làm dynamic styling, để dùng bạn cần cài đặt như sau

    npm i styled-components
    # or
    yarn add styled-components

Sau đó import và sử dụng như ví dụ này

import styled from 'styled-components'

const Paragraph = styled.p`
    font-size: 16px;
    text-align: center;
    color: blue;
    &:hover {
        font-size: 18px;
        color: ${props => props.hoverColor};
    }
`

function HomePage() {
    return (
        <Paragraph hoverColor="red" >Home Pages</Paragraph>
    )
}

Ưu điểm:

Được xây dựng cho React nên rất nhiều người sử dụng và hỗ trợ
Dễ dàng thực thiện dynamic styling
Có thể tuỳ chỉnh và tái sử dụng các component. vd: sử dung <Title /> thay cho <h2 className'title"/>

Nhược điểm

Không thực hiện kết xuất từ server, chỉ kết xuất ở client
Cần phải dành thời gian để làm quen với nó
Khi biên dịch, styled-components sẽ tạo ra class ngẫu nhiên nên sẽ khó debug

Sử dụng Emotion với Next.js

Emotion là một framework CSS dành cho React nên sẵn sàng hỗ trợ cho Next.js. Ngoài ra Emotion còn hỗ trợ kếtw xuất phía Server một cách vượt trội.

Để cài đặt

    npm install --save @emotion/react
    #or
    yarn add @emotion/react

Sau đó import sử dụng dễ dàng như styled-components

const Paragraph = styled.p`
    font-size: 16px;
    text-align: center;
    color: blue;

    &:hover {
        font-size: 18px;
        color: ${props => props.hoverColor};
    }
`

export default function Home() {
  return <Paragraph hoverColor="red">I am a component made with Emotion</Paragraph>
}

Ưu điểm

Hỗ trợ render phía server trong Next.js
có tất cả các tính năng của styled-components
Có nhiều package hỗ trợ khác nhau

Nhược điểm:

Giống kiểu styled-components, tạo ngẫu nhiên class nên khó debug
Cần thời gian học sử dung

Sử dụng Tailwind CSS với Next.js

Next.js cũng hỗ trợ cả Tailwind CSS dưới dạng plugin PostCSS, và tạo slyte chính xác cho bạn. Để sử dụng bạn cần cài đặt

 npm install -D tailwindcss postcss autoprefixer

Sau đó generate tailwindcss

npx tailwindcss init -p

Nó sẽ tạo ra 2 files

postcss.config.js - bạn không can thiệp vào đây
tailwind.config.js

Trong file tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

File globals.css thêm vào Tailwind CSS directives

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Như vậy, phần setup đã xong, giờ bạn có thể sử dụng nó, ví dụ

export default function Home() {
    return (
      <p class="text-center text-lg hover:text-red-600">
        I am a component made with Tailwind CSS
      </p>
    )
  }

Ưu điểm:

Rất nhiều class đã tạo sẵn sẽ hỗ trợ cho bạn
Khi quen thuộc sẽ giúp dự án đẩy nhanh hơn
CSS không dùng sẽ tự động xoá nên tối ưu hơn

Nhược điểm

Không tách biệt nội dung và cấu trúc CSS và HTML do nó đã biên dịch sẵn
Cần thời gian để học

Style CSS trong Next.js

Sử dụng global CSS trong Next.js

Sử dụng CSS modules với Next.js

Sử dụng Next.js với Sass

Sử dụng Styled-JSX trong Next.js

Sử dụng styled-components trong next.js

Sử dụng Emotion với Next.js

Sử dụng Tailwind CSS với Next.js

Add new comment

Mã giảm giá

Mua Domain Gía Rẻ - Săn Sale Mỗi Ngày

TinoHost Vĩnh Viễn Lên Đến 39% (Mới Cập Nhập)

Khuyến Mãi AZDIGI - Ưu đãi 70% (Cập Nhập tháng 4 - 2024)

Nội dung bài viết

Bài Viết Liên Quan

Axios trong Next.js

Style CSS trong Next.js

Hướng dẫn fix lỗi. "localStorage is not defined" trong Next.js

Danh mục bài viết

Nguyen Phu Dung

Liên Hệ Với Chúng Tôi