Bạn có thể thêm css để phản ứng không?

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

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

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

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

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
06 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

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
06 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 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

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

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 tốt nhất về Emotion là khung của nó không thể biết được, vì vậy bạn có thể mang kiến ​​thức của mình đến các thư viện và khung khác ngoài React, trong khi khá giống với các thành phần theo kiểu, vì vậy bạn có thể thay đổi việc nhập trong một số trường hợp)


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

Bạn đã thêm các chức năng vào ứng dụng React của mình. Bây giờ, đã đến lúc thêm giao diện mà ứng dụng React của bạn xứng đáng

Trong phần này, bạn sẽ học cách thêm CSS vào ứng dụng React JS của mình

Hướng dẫn React này là phần 3 của 11 trong loạt bài React cho người mới bắt đầu

  • Phần 1 – Hướng dẫn React. Hướng dẫn học React cho người mới bắt đầu năm 2020
  • Phần 2 – Làm việc với React Form và Xử lý sự kiện
  • Phần 4 – Cách chỉnh sửa các mục Todos
  • Phần 5 – Trạng thái phản ứng liên tục trong bộ lưu trữ cục bộ
  • Phần 6 – Bắt đầu với React Lifecycle Methods
  • Phần 7 – Bắt đầu với React Hook
  • Phần 8 – Cách sử dụng SVG Icons trong React
  • Phần 9 – Định tuyến với React Router
  • Phần 10 – Cách thêm Menu Hamburger trong React
  • Phần 11 – Triển khai Ứng dụng React lên Trang GitHub

Mặc dù có một số cách chúng ta có thể đạt được điều đó, nhưng chúng ta sẽ đề cập đến CSS nội tuyến, biểu định kiểu CSS và Mô-đun CSS trong phần này

Một số chiến lược khác bao gồm – CSS-in-JS (e. g các thành phần được tạo kiểu, Cảm xúc, JSS), Sass & SCSS, Ít hơn, Tiện ích-Đầu tiên-CSS (e. g CSS Tailwind)

Hãy đi sâu vào

Bắt đầu với Biểu định kiểu CSS

Điều này khá đơn giản vì bạn nên làm quen với nó khi làm việc với tệp HTML. Vì vậy, hãy bắt đầu bằng cách tạo một tệp mới có tên là

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
19 trong thư mục
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
20. Bên trong tệp này, thêm các kiểu cơ sở sau

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

Lưu các tập tin

Tiếp theo, nhập nó vào tệp

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

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

Nếu muốn, bạn có thể nhập tệp trong tệp thành phần chính,

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
22 thay vì
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
21. Lưu các tập tin

Bạn sẽ thấy các kiểu CSS của mình được hiển thị ở giao diện người dùng

Bây giờ, hãy bắt đầu thêm tên lớp

Hãy nhớ rằng, trong HTML, chúng ta thêm các lớp CSS vào các phần tử bằng cách sử dụng cú pháp

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
24. Nhưng trong React JSX, chúng tôi sử dụng một cú pháp đặc biệt gọi là
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
25

Mở

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
22 và cập nhật phương thức
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
27 để thêm tên lớp

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

Ghi chú. Chúng tôi đã thêm một trình bao bọc

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

Tiếp theo, vào bên trong tệp

50 và cập nhật phần tử

51,

52 và

53 để bao gồm tên lớp. bạn nên có

5

Sau đó, cập nhật tệp

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
19 để bao gồm các kiểu sau

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

Lưu tệp của bạn và kiểm tra giao diện người dùng

Đó là nó. Giản dị

kiểu dáng nội tuyến

Nếu bạn còn nhớ, chúng tôi sử dụng kiểu nội tuyến trong tài liệu HTML bằng cách chuyển một chuỗi gồm tất cả các kiểu tới thuộc tính

55. Nhưng với React JSX, chúng ta sẽ gán một đối tượng JavaScript cho thuộc tính

Vào bên trong tệp

56 và cập nhật thành phần tiêu đề để bao gồm thuộc tính

55

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

Lưu tệp và kiểm tra lối vào để xem các thay đổi của bạn

Trong mã, bạn sẽ nhận thấy hai dấu ngoặc nhọn. Chúng ta đã biết rằng các biểu thức JavaScript hợp lệ trong JSX được viết bên trong dấu ngoặc nhọn. Dấu ngoặc nhọn thứ hai dành cho kiểu dáng nội tuyến ở dạng đối tượng JavaScript

Ngoài ra, hãy lưu ý rằng các phím kiểu nằm trong camelCase

Một cách khác để sử dụng kiểu nội tuyến trong React là sử dụng các biến. Vẫn trong tệp

56, hãy thêm đoạn mã sau vào trên câu lệnh

59

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

Sau đó cập nhật thẻ mở

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
10 để bạn 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

);
0

Lưu các tập tin. Bây giờ, mã của bạn sẽ trông như thế này

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

);
1

Kiểm tra giao diện người dùng để xem các thay đổi của bạn hoặc kiểm tra phần tử

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
11 để xem khai báo kiểu CSS của bạn. Trong mã, chúng tôi đã tạo một đối tượng,
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
12 với thông tin về kiểu dáng và sau đó tham chiếu nó trong thuộc tính

55 của thẻ
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
10. Ở đây, chúng tôi đã sử dụng một dấu ngoặc nhọn

tiếp tục

Tạo kiểu ứng dụng React với các mô-đun CSS

Đôi khi, bạn muốn giới hạn cách tiếp cận biểu định kiểu CSS để giữ các kiểu chung của bạn và sau đó mở rộng phạm vi các kiểu thành phần của bạn cục bộ

Mô-đun CSS cho phép chúng tôi làm điều đó. Nó loại bỏ nguy cơ xung đột tên liên quan đến bộ chọn CSS hoặc một số vấn đề khác liên quan đến kiểu dáng phạm vi toàn cầu

Ví dụ: nếu bạn thêm Mô-đun CSS cho thành phần

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
15, các kiểu được áp dụng sẽ chỉ được áp dụng cho thành phần đó. Bằng cách này, bạn có thể sử dụng cùng tên lớp trong các thành phần khác nhau mà không lo xung đột với bộ chọn CSS

Hãy xem nó hoạt động như thế nào

Để tạo kiểu cho thành phần

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
15, hãy vào bên trong thư mục
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
17 và tạo một tệp có tên
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
18. Sau đó, thêm các kiểu sau

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

Sau đó, vào bên trong tệp

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
19 và nhập tệp
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
50 như vậy

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

Sau đó, cập nhật đánh dấu trong câu lệnh

59 để bao gồm tên lớp

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

Lưu tệp của bạn và kiểm tra giao diện người dùng

Vậy chúng ta đã làm gì?

Đầu tiên, chúng tôi yêu cầu React xử lý tệp CSS dưới dạng mô-đun CSS bằng cách thêm vào tệp

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
52. Mô-đun này sau đó được nhập vào tệp
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
19 và được khai báo dưới dạng một đối tượng JavaScript có tên là
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
54

Đối tượng này chứa tất cả bộ chọn lớp trong tệp

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
50 và chúng tôi đã tham chiếu chúng trong thuộc tính className của JSX với
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
56 (ví dụ:
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
57)

Xin lưu ý

Bạn có thể đặt tên cho đối tượng

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
54 bất cứ điều gì bạn muốn. Ngoài ra, hãy lưu ý cách bạn đặt tên cho một lớp có nhiều hơn một từ (e. g
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
59). Đối với điều này, bạn nên sử dụng camelCase (tôi. e
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
80). Nhưng nếu bạn muốn có dấu gạch nối trong bộ chọn lớp của mình, thì bạn nên sử dụng ký hiệu ngoặc (ví dụ:
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
81) để tham chiếu bộ chọn bên trong tệp
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
82

Bây giờ, nếu bạn kiểm tra danh sách việc cần làm trong các công cụ dành cho nhà phát triển trình duyệt của mình, bạn sẽ thấy rằng mô-đun CSS tạo ra các tên lớp duy nhất. Với điều này, bạn không phải lo lắng về xung đột tên bộ chọn

Đối với những người trong chúng ta, những người muốn sử dụng Sass để biên dịch tệp

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
83 thành CSS thông thường. Tất cả những gì bạn phải làm là cài đặt
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
84 như vậy

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

Đó là tất cả

Nếu thích, bạn có thể sử dụng Mô-đun CSS với Sass. Chỉ cần thay đổi phần mở rộng tệp

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
50 thành
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
83. Và cập nhật phần nhập trong tệp
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
19 để phản ánh phần mở rộng

Thêm Kiểu khi bất kỳ mục công việc nào được hoàn thành

Ở đây, chúng tôi sẽ thêm một

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
88 vào một nhiệm vụ đã hoàn thành trong danh sách việc cần làm. Điều này nên được thẳng về phía trước. Trong thành phần
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
15, thêm các kiểu sau vào phương thức
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
27 nhưng phía trên câu lệnh

59

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

Sau đó, cập nhật câu lệnh

59 để bạn có

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

Trong đoạn mã này, chúng tôi đã giới thiệu một thẻ mới,

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

);
03 và sau đó thêm thuộc tính

55 vào thẻ đó. Chúng tôi cũng đã sử dụng toán tử bậc ba trong thuộc tính

55 để tự động thay đổi kiểu CSS nếu bất kỳ (các) mục việc cần làm nào được hoàn thành

Như một bồi dưỡng,

Toán tử bậc ba (hoặc câu lệnh if nội tuyến) như được sử dụng ở đây sẽ kiểm tra xem có mục nào trong danh sách việc cần làm đã được hoàn thành hay chưa

Đây là cách nó hoạt động

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

i. e nếu điều kiện là

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

);
06 (trong trường hợp của chúng tôi, nếu tác vụ được đánh dấu hoàn thành), chúng tôi áp dụng câu lệnh thứ hai,
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

);
07 (chúng tôi đã tạo biến này làm đối tượng chứa thông tin kiểu dáng trong cùng một thành phần), nếu không, chúng tôi áp dụng null ( . không có phong cách)

Được. Lưu tệp và kiểm tra lối vào

Bạn có thể thêm css để phản ứng không?

đó là nó. Nhưng trước khi chúng ta chuyển sang phần tiếp theo, hãy đơn giản là tối ưu hóa mã của chúng ta

Sử dụng hủy diệt

Nếu bạn nhìn vào thành phần

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
15, chúng tôi đã viết bội số _______ 409 để lấy các giá trị ________ 410, ________ 411 và ________ 412. Điều này có thể gây khó khăn nếu ứng dụng của bạn trở nên phức tạp

Thay vì làm những điều này, bạn có thể kéo từng biến ra khỏi

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

);
13. Nói cách khác, bạn có thể "hủy cấu 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

);
13 và lấy các biến này từ nó

Để hủy cấu trúc của

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

);
10 từ
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

);
16, bạn sẽ có một cái gì đó như thế này

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

Điều tương tự cũng áp dụng cho

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

);
11 và
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

);
12

Hãy áp dụng điều này trong thành phần

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
15. Thêm dòng mã này ngay phía trên câu lệnh

59

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

Sau đó, thay thế mọi

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

);
09 bằng các biến tương ứng của chúng. Chẳng hạn,
const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
02 nên được thay thế bằ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(
  

Button

);
12, v.v. Tuyên bố

59 của bạn sẽ trông như thế này

Bạn có thể thêm CSS vào thành phần React không?

Thay vì sử dụng các kiểu nội tuyến, việc nhập biểu định kiểu CSS để tạo kiểu cho các thành phần của thành phần là điều phổ biến. Viết CSS trong biểu định kiểu có lẽ là cách tiếp cận cơ bản và phổ biến nhất để tạo kiểu cho ứng dụng React, nhưng nó không nên bị loại bỏ dễ dàng như vậy.

Tại sao tôi không thể nhập CSS vào React?

Lỗi này được tạo ra bởi vì trình biên dịch chỉ có thể nhập tệp từ thư mục src . Ở đây file CSS được lưu ngoài thư mục src nên trình biên dịch không import được. Để mã này hoạt động, bạn chỉ cần lưu tệp CSS bên trong thư mục src.

React JS có sử dụng HTML và CSS không?

Điều kiện tiên quyết. Quen thuộc với các ngôn ngữ HTML, CSS và JavaScript cốt lõi, kiến ​​thức về thiết bị đầu cuối/dòng lệnh. React sử dụng cú pháp HTML-in-JavaScript được gọi là JSX (JavaScript và XML) .