Nơi đặt các tệp CSS trong dự án React

Các trình khởi động ứng dụng React phổ biến như Tạo ứng dụng React và Tiếp theo. js đã hỗ trợ nhập CSS bên trong tệp JavaScript

CSS trong Tạo ứng dụng React

Trong Tạo ứng dụng React, tất cả những gì bạn cần làm là viết CSS và nhập nó một lần vào bên trong ứng dụng của bạn

Ví dụ: hãy tạo một tệp .css có tên style.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.hello {
  color: blue;
}

Tiếp theo, viết một tệp App.js và viết một thành phần React đơn giản với các lớp

import React from "react";

export default function App() {
  return (
    <div className="App">
      <h1 className="Hello">Hello World! My name is John</h1>
    </div>
  );
}

Cuối cùng, viết một tệp index.js nơi bạn nhập thành phần và hiển thị nó vào DOM. Bạn cũng cần nhập tệp CSS ở đây

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);

Và bạn sẽ thấy văn bản

import React from "react";

export default function App() {
  return (
    <div className="App">
      <h1 className="Hello">Hello World! My name is John</h1>
    </div>
  );
}

import React from "react";

export default function App() {
  return (
    <div className="App">
      <h1 className="Hello">Hello World! My name is John</h1>
    </div>
  );
}

CSS trong Tiếp theo. js

Giống như CRA, Next. js đã có sẵn hỗ trợ cho CSS. Sự khác biệt duy nhất là nơi bạn cần nhập tệp. Để thêm một tệp CSS chung vào Tiếp theo của bạn. js, bạn cần nhập tệp bên trong tệp

import React from "react";

export default function App() {
  return (
    <div className="App">
      <h1 className="Hello">Hello World! My name is John</h1>
    </div>
  );
}

Tệp

import React from "react";

export default function App() {
  return (
    <div className="App">
      <h1 className="Hello">Hello World! My name is John</h1>
    </div>
  );
}

import '../styles.css'

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

Để biết thêm thông tin, vui lòng truy cập Tiếp theo. tài liệu js cho CSS tại đây

Điều gì về bản soạn sẵn tùy chỉnh?

Bây giờ nếu bạn không sử dụng Create React App hoặc Next. js, thì bạn phải định cấu hình trình tải Kiểu và CSS trong gói mô-đun của mình

Nó sẽ khác nhau đối với mỗi gói, nhưng nếu bạn sử dụng Webpack, bạn có thể làm theo ví dụ soạn sẵn này mà tôi đã tạo trước đây

Các tệp CSS nên được đặt ở đâu?

Bạn có nên sử dụng tệp CSS trong React không?