Hướng dẫn how do you add a css link in react? - làm thế nào để bạn thêm một liên kết css trong phản ứng?

Hướng dẫn how do you add a css link in react? - làm thế nào để bạn thêm một liên kết css trong phản ứng?

Chào các cậu!.

Trong bài đăng này, chúng tôi sẽ xem xét các cách tốt nhất mã CSS có thể được thêm vào trong React JS hoặc cho bạn ứng dụng React. Rõ ràng, CSS rất quan trọng trong việc làm cho người dùng ứng dụng của bạn thân thiện và hấp dẫn trực quan. Đây là những cách khác nhau để thêm CSS vào ứng dụng React của bạn:
Obviously, CSS is crucial in making your app user friendly and visually attractive. These are the different ways to add CSS to your react app:

Vui lòng kiểm tra hướng dẫn mới của tôi.


1 - Hiển thị kiểu bên ngoài

Bạn có thể tạo một tệp CSS mới trong thư mục dự án của mình và thêm CSS của bạn bên trong nó. Sau đó, bạn có thể nhập nó vào trang thành phần, lớp hoặc React JS của bạn. Mã sau được sử dụng để nhập bảng kiểu CSS bên ngoài.
The following code is used to import an external CSS stylesheet.

import "./styles.css";

Nhập chế độ FullScreenen EXIT Mode FullScreen

2 - CSS nội tuyến

Có lẽ phổ biến nhất và nhanh nhất trong số 3 là CSS nội tuyến. Tuy nhiên, nó có nhiều nhược điểm và thường không được sử dụng trừ khi nó là một ứng dụng rất nhỏ. Về cơ bản, chúng tôi tạo một đối tượng chứa các tài liệu tham khảo khác nhau sau đó được gọi bằng cách sử dụng thuộc tính style{}. Ví dụ, CSS được thêm như thế này:
Basically, we create an object that contains different references which are then called using the style{} attribute.
For example, the CSS is added like this:

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

2 - CSS nội tuyến

<section style={styles.section}>
  <div style={styles.wrapper}>
  </div>
</section>

Nhập chế độ FullScreenen EXIT Mode FullScreen

2 - CSS nội tuyến

Có lẽ phổ biến nhất và nhanh nhất trong số 3 là CSS nội tuyến. Tuy nhiên, nó có nhiều nhược điểm và thường không được sử dụng trừ khi nó là một ứng dụng rất nhỏ. Về cơ bản, chúng tôi tạo một đối tượng chứa các tài liệu tham khảo khác nhau sau đó được gọi bằng cách sử dụng thuộc tính style{}. Ví dụ, CSS được thêm như thế này:

Sau đó, nó được thêm vào một yếu tố như thế này:

npm install --save styled-components

3 - Các thành phần kiểu dáng

import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid red;
  color:red;
`
//display the HTML
render(
  <div>
    <Button>Button</Button>
  </div>
);

Nhập chế độ FullScreenen EXIT Mode FullScreen

Khác với những điều này, có 3 cách hữu ích hơn bạn có thể thêm CSS (tín dụng vào Lukeshiru):

4 - Mô -đun CSS

Bạn cũng có thể thêm các kiểu phạm vi khá dễ dàng, bạn chỉ cần tạo một tệp với tiện ích mở rộng .module.css, như thế này:

// ComponentName.module.css

.Red {
  color: #f00;
}

.Blue {
  color: #00f;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Sau đó, bạn nhập nó như thế này:

import styles from "./ComponentName.module.css";

Nhập chế độ FullScreenen EXIT Mode FullScreen

và sử dụng nó như thế này:

<span className={styles.Red}>This text will be red</span>
<span className={styles.Blue}>This text will be blue</span>

Nhập chế độ FullScreenen EXIT Mode FullScreen

5 - CSS nguyên tử

Một trong những khung CSS nguyên tử phổ biến nhất ngoài kia là Tailwind, bằng cách biến nó thành một phần trong dự án của bạn theo hướng dẫn của họ, bạn chỉ có thể sử dụng các tên lớp mà không cần chạm vào CSS.

<button className="font-bold bg-blue-600 px-6 py-3 text-white rounded-md">Blue button</button>

Nhập chế độ FullScreenen EXIT Mode FullScreen

6 - Cảm xúc

Thành phần kiểu dáng không phải là thư viện duy nhất cho phép bạn tạo các bộ phận với các kiểu được nhúng vào chúng, bạn có những lựa chọn thay thế tuyệt vời ngoài đó như cảm xúc. Điều tốt nhất về cảm xúc là đó là Khung bất khả tri, vì vậy bạn có thể đưa kiến ​​thức của mình đến các thư viện và khung khác ngoài phản ứng, trong khi khá giống với các thành phần kiểu dáng (vì vậy bạn có thể trong một số kịch bản chỉ thay đổi nhập).


Và bạn có nó rồi đấy! Tôi chắc chắn có nhiều thứ nữa ngoài kia nhưng tôi nghĩ rằng các tùy chọn này đánh dấu vào hầu hết các hộp cần thiết khi thêm CSS vào ứng dụng của bạn.

Cho đến lần sau. Chúc mừng!
Cheers!