Cách sử dụng thuộc tính kiểu trong React

Giả sử bạn hiện đang sử dụng toàn bộ tiềm năng của tailwind và có lẽ bạn cũng đã sử dụng các phần tử tailwind và chỉ cần sao chép, dán các thành phần tạo sẵn. Tôi cũng thường làm như vậy nhưng có những lúc chúng tôi…không thể chỉ nhấn CTRL+C và CTRL+V.

Gặp thuộc tính kiểu, bạn sẽ thấy điều này thường xuyên, đặc biệt là trong tailwind, về cơ bản giống như cài đặt bổ sung cần thiết cho các thành phần của bạn ngoài kiểu nội tuyến trên className.

Thông thường, kiểu được sử dụng để thêm màu nền, hình nền, v.v. Bạn có thể tìm thêm thông tin trên tài liệu chính thức của tailwind.https://tailwindcss.com/docs/background-attachment

Đây là cách nó trông bình thường.

Bây giờ, nếu chúng ta chỉ sao chép và dán mã, nó sẽ báo lỗi như thế này.

Nó yêu cầu điều chỉnh bổ sung cho phong cách, điều này không có gì ngạc nhiên khi nó cũng được giải thích trong tài liệu phản ứng nhưng vì lý do nào đó có lẽ giống như tôi đã bỏ lỡ nó.https://reactjs.org/docs/dom-elements.html#style

Vì vậy, TLDR, chúng ta không thể đơn giản sử dụng dấu gạch chéo như màu nền, chúng ta cần thay đổi nó thành màu camelCased thành màu nền.

màu nền thành Màu nền,

vị trí nền đến vị trí nền

hình nền đến hình nền

và không chỉ vậy, chúng ta cũng cần xóa trích dẫn đóng gói tất cả kiểu, thay thế bằng dấu ngoặc nhọn kép và đặt giá trị trong trích dẫn, như thế này.

Đó là nó! Chúng ta không cần phải làm bất cứ điều gì khác. Bây giờ mã sẽ hoạt động hoàn hảo. Đây là giao diện của dự án của tôi bây giờ, tất cả chỉ bằng cách sao chép và dán mã từ các phần tử tailwind. (tôi thực sự khuyên bạn nên nó,https://tailwind-elements.com/)

Chúc vui vẻ! Cảm ơn vì đã đọc!