Bạn có thể sử dụng CSS thông thường với phản ứng không?

Question

Trong ảnh này, chúng ta sẽ tìm hiểu những cách tốt nhất để thêm mã CSS vào React JS hoặc vào ứng dụng React. CSS rất quan trọng trong việc làm cho ứng dụng của bạn trở nên thân thiện với người dùng và hấp dẫn về mặt hình ảnh. Dưới đây là các cách khác nhau để thêm CSS vào ứng dụng React

Nội dung chính Show

biểu định kiểu bên ngoài
CSS nội tuyến
các thành phần được tạo kiểu
mô-đun CSS
CSS nguyên tử
4 - Mô-đun CSS
5 - CSS nguyên tử
6 - Cảm xúc
Bạn có thể sử dụng HTML bình thường với React không?
CSS nào là tốt nhất cho React?

biểu định 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 vào bên trong nó. Sau đó, bạn có thể nhập tệp vào trang thành phần, lớp hoặc React JS của mình

Bạn có thể sử dụng mã bên dưới để nhập biểu định kiểu CSS bên ngoài

import "./styles.css";

CSS nội tuyến

CSS nội tuyến có lẽ là phương pháp phổ biến nhất và nhanh nhất trong ba phương pháp để thêm CSS vào ứng dụng React. Tuy nhiên, nó có nhiều nhược điểm và thường không được khuyến khích sử dụng trừ khi bạn có một ứng dụng rất nhỏ

Chúng tôi tạo một đối tượng chứa các tham chiếu khác nhau, sau đó chúng tôi gọi đối tượng này bằng thuộc tính style{}

Ví dụ CSS được thêm vào như hình bên dưới

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

CSS sau đó được thêm vào một phần tử như vậy

các thành phần được tạo kiểu

Các thành phần được tạo kiểu cho phép bạn viết CSS thực trong JavaScript của mình. Ưu điểm chính là bạn có thể thêm mã điều kiện và sử dụng các biến và hàm trong CSS

Bạn có thể cài đặt styled-components bằng lệnh sau

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

0

Tiếp theo, bạn cần nhập styled-components trong thành phần của mình. Sau đó, bạn có thể tạo một biến mới chứa CSS. Tên biến giống nhau với dấu ngoặc mở và đóng sẽ hiển thị hoặc tạo phần tử HTML với các kiểu đã thêm trước đó

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(
  
    Button
  
);

mô-đun CSS

Bạn cũng có thể dễ dàng thêm các kiểu có phạm vi, vì bạn chỉ cần tạo một tệp có phần mở rộng là

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

2, như hình bên dưới

// ComponentName.module.css

.Red {
  color: #f00;
}

.Blue {
  color: #00f;
}

Sau đó, bạn nhập các kiểu như sau

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

Bây giờ bạn có thể sử dụng các kiểu như hình bên dưới

________số 8_______

CSS nguyên tử

Một trong những khung CSS nguyên tử phổ biến nhất hiện có là Tailwind. Nếu bạn đưa Tailwind vào dự án của mình bằng cách làm theo hướng dẫn chính thức, thì bạn có thể sử dụng

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

3 mà không cần chạm vào CSS

Blue button

Cảm xúc

Các thành phần được tạo kiểu không phải là thư viện duy nhất cho phép bạn tạo các thành phần có kiểu nhúng. Một thay thế là Cảm xúc. Điều tuyệt vời nhất về Emotion là framework của nó là bất khả tri, vì vậy bạn có thể mang kiến thức của mình đến các thư viện và framework khác ngoài React, trong khi khá giống với styled-components, vì vậy bạn có thể thay đổi cách nhập trong một số tình huống)

Trong ảnh này, chúng tôi đã xem xét các tùy chọn sẽ đánh dấu vào hầu hết các ô cần thiết khi thêm CSS vào ứng dụng của bạn

Theo tôi, có lẽ mạnh mẽ và hữu ích nhất là Styled Components. Thành phần được tạo kiểu cho phép bạn viết CSS thực trong JavaScript của mình. Ưu điểm chính là bạn có thể thêm mã điều kiện và sử dụng các biến và hàm trong CSS

Bạn có thể cài đặt Styled Components bằng lệnh sau

npm install --save styled-components

Tiếp theo, bạn cần nhập nó vào thành phần của mình. Sau đó, bạn có thể tạo một biến mới chứa CSS. Tên biến giống nhau với dấu ngoặc mở và đóng sẽ hiển thị hoặc tạo một phần tử HTML với các kiểu đã thêm trước đó trên đó

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