Cách nhập tệp CSS bên ngoài trong React js

Thiết lập dự án này sử dụng webpack để xử lý tất cả nội dung. webpack cung cấp một cách tùy chỉnh để “mở rộng” khái niệm về import ngoài JavaScript. Để thể hiện rằng tệp JavaScript phụ thuộc vào tệp CSS, bạn cần nhập CSS từ tệp JavaScript

Button.css​

.Button {
  padding: 20px;
}

Bản sao

import React, { Component } from 'react';import './Button.css'; // Tell webpack that Button.js uses these stylesclass Button extends Component { render() { // You can use them as regular CSS styles return

; }}0​

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

Bản sao

Điều này không bắt buộc đối với React nhưng nhiều người thấy tính năng này tiện lợi. Bạn có thể đọc về những lợi ích của phương pháp này tại đây. Tuy nhiên, bạn nên lưu ý rằng điều này làm cho mã của bạn ít di động hơn đối với các công cụ và môi trường xây dựng khác so với webpack

Trong quá trình phát triển, việc thể hiện các phụ thuộc theo cách này cho phép các kiểu của bạn được tải lại nhanh chóng khi bạn chỉnh sửa chúng. Trong quá trình sản xuất, tất cả các tệp CSS sẽ được nối thành một tệp

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

1 được rút gọn duy nhất trong đầu ra của bản dựng

Nếu bạn lo lắng về việc sử dụng ngữ nghĩa dành riêng cho webpack, bạn có thể đặt tất cả CSS của mình ngay vào

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

2. Nó vẫn sẽ được nhập từ

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

3, nhưng bạn luôn có thể xóa quá trình nhập đó nếu sau này bạn chuyển sang một công cụ xây dựng khác

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

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

1 có tên

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

5

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

.hello {
  color: blue;
}

Tiếp theo, viết một tệp

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

6 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

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

7 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, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

8 sẽ có màu xanh lam mặc dù bạn không nhập CSS trực tiếp vào thành phần. Trong bản dựng sản xuất, tất cả các tệp CSS đã nhập sẽ được nối thành một tệp CSS được rút gọn duy nhất và được nhập vào ứng dụng trong tệp

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

9

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>
  );
}

0

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>
  );
}

1 sẽ ghi đè thành phần mặc định trong đó Tiếp theo. js hiển thị các trang của bạn. Đó là lý do tại sao đây là nơi lý tưởng để nhập tệp CSS toàn cầ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} />
}

Để 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

Tại sao CSS bên ngoài không hoạt động trong phản ứng?

Làm cách nào để nhập tệp CSS vào tệp JS?