Nhập css trong js

Tiếp theo. js cho phép bạn nhập tệp CSS từ tệp JavaScript. Điều này là có thể bởi vì Tiếp theo. js mở rộng khái niệm về

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

2 ngoài JavaScript

Nội dung chính Hiển thị

• Thêm biểu định kiểu chung
• Nhập kiểu từ node_modules
• Thêm CSS cấp thành phần
• Hỗ trợ Sass
• Tùy chỉnh tùy chọn Sass
• Biến Sass
• Nó có hoạt động với JavaScript bị tắt không?

Thêm biểu định kiểu chung

Để thêm biểu định kiểu vào ứng dụng của bạn, hãy nhập tệp CSS trong

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

3

Ví dụ: xem xét biểu định kiểu sau có tên

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

4

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Tạo tệp

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

3 nếu chưa có. Sau đó,

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

2 tệp

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

4

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Các kiểu này (

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

4) sẽ áp dụng cho tất cả các trang và thành phần trong ứng dụng của bạn. Do tính chất chung của biểu định kiểu và để tránh xung đột, bạn chỉ có thể nhập chúng bên trong

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

3

Trong quá trình phát triển, việc thể hiện biểu định kiểu theo cách này cho phép các kiểu của bạn được tải lại nóng khi bạn chỉnh sửa chúng—nghĩa là bạn có thể giữ nguyên trạng thái của ứng dụng

Trong quá trình sản xuất, tất cả các tệp CSS sẽ tự động được nối thành một tệp

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

00 được rút gọn duy nhất

Nhập kiểu từ node_modules

kể từ tiếp theo. js 9. 5. 4, nhập tệp CSS từ

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

01 được cho phép ở bất kỳ đâu trong ứng dụng của bạn

Đối với các biểu định kiểu chung, như

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

02 hoặc

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

03, bạn nên nhập tệp bên trong

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

3. Ví dụ

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

0

Để nhập CSS theo yêu cầu của thành phần bên thứ ba, bạn có thể thực hiện việc này trong thành phần của mình. Ví dụ

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

6

Thêm CSS cấp thành phần

Tiếp theo. js hỗ trợ các Mô-đun CSS bằng cách sử dụng quy ước đặt tên tệp

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

05

Mô-đun CSS phạm vi cục bộ CSS bằng cách tự động tạo một tên lớp duy nhất. Điều này cho phép bạn sử dụng cùng một tên lớp CSS trong các tệp khác nhau mà không lo xung đột

Hành vi này làm cho Mô-đun CSS trở thành cách lý tưởng để bao gồm CSS cấp thành phần. Các tệp Mô-đun CSS có thể được nhập vào bất kỳ đâu trong ứng dụng của bạn

Ví dụ: hãy xem xét một thành phần

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

06 có thể tái sử dụng trong thư mục

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

07

Đầu tiên, tạo

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

08 với nội dung sau

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

1

Sau đó, tạo

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

09, nhập và sử dụng tệp CSS ở trên

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

3

Mô-đun CSS là một tính năng tùy chọn và chỉ được bật cho các tệp có phần mở rộng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

60. Các biểu định kiểu

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

61 thông thường và các tệp CSS chung vẫn được hỗ trợ

Trong quá trình sản xuất, tất cả các tệp Mô-đun CSS sẽ tự động được nối thành nhiều tệp

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

00 được rút gọn và phân tách mã. Các tệp

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

00 này đại diện cho các đường dẫn thực thi nóng trong ứng dụng của bạn, đảm bảo lượng CSS tối thiểu được tải để ứng dụng của bạn vẽ

Hỗ trợ Sass

Tiếp theo. js cho phép bạn nhập Sass bằng cả tiện ích mở rộng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

64 và

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

65. Bạn có thể sử dụng Sass cấp thành phần thông qua Mô-đun CSS và tiện ích mở rộng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

66 hoặc

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

67

Trước khi bạn có thể sử dụng Tiếp theo. js' tích hợp hỗ trợ Sass, hãy nhớ cài đặt

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

68

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

3

Hỗ trợ Sass có các lợi ích và hạn chế giống như hỗ trợ CSS tích hợp được nêu chi tiết ở trên

Ghi chú. Sass hỗ trợ hai cú pháp khác nhau, mỗi cú pháp có phần mở rộng riêng. Tiện ích mở rộng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

64 yêu cầu bạn sử dụng cú pháp SCSS, trong khi tiện ích mở rộng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

65 yêu cầu bạn sử dụng Cú pháp thụt lề ("Sass")

Nếu bạn không chắc nên chọn cái nào, hãy bắt đầu với tiện ích mở rộng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

64, đây là tập hợp siêu CSS và không yêu cầu bạn học Cú pháp thụt lề ("Sass")

Tùy chỉnh tùy chọn Sass

Nếu bạn muốn định cấu hình trình biên dịch Sass, bạn có thể làm như vậy bằng cách sử dụng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

12 trong

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

13

Ví dụ để thêm

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

14

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

0

Biến Sass

Tiếp theo. js hỗ trợ các biến Sass được xuất từ ​​tệp Mô-đun CSS

Ví dụ: sử dụng biến

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

15 Sass đã xuất

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

2

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

3

CSS-in-JS

ví dụ

• JSX được tạo kiểu
• Thành phần theo kiểu
• Cảm xúc
• Linaria
• Tailwind CSS + Cảm xúc
• phong cách
• Cxs
• Aphrodite
• mèo con
• mũi khâu

Có thể sử dụng bất kỳ giải pháp CSS-in-JS hiện có nào. Đơn giản nhất là kiểu nội tuyến

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

0

Chúng tôi kết hợp styled-jsx để cung cấp hỗ trợ cho CSS có phạm vi bị cô lập. Mục đích là để hỗ trợ "CSS bóng" tương tự như Thành phần Web, rất tiếc là không hỗ trợ kết xuất máy chủ và chỉ dành cho JS

Xem các ví dụ trên để biết các giải pháp CSS-in-JS phổ biến khác (như Thành phần được tạo kiểu)

Một thành phần sử dụng

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

16 trông như thế này

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

1

Vui lòng xem tài liệu styled-jsx để biết thêm ví dụ

Câu hỏi thường gặp

Nó có hoạt động với JavaScript bị tắt không?

Có, nếu bạn tắt JavaScript, CSS sẽ vẫn được tải trong bản dựng sản xuất (

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

17). Trong quá trình phát triển, chúng tôi yêu cầu phải bật JavaScript để cung cấp trải nghiệm tốt nhất cho nhà phát triển với Làm mới nhanh