Hướng dẫn react css not applying - phản ứng css không áp dụng
Tôi đang xây dựng một ứng dụng React với phản ứng tĩnh. Show
Mỗi thành phần có cấu trúc thư mục như thế này:
Và trong tệp 6, tôi đang làm một 7 thôGiả sử CSS của tôi chứa một cái gì đó như thế này:
và hàm kết xuất trong thành phần của tôi hiển thị thẻ:
Cơ thể của trang sẽ trở thành màu cam, nhưng thẻ sẽ không trở nên màu tím. Tại sao CSS này không được áp dụng đầy đủ cho HTML được tạo ra? Hỏi ngày 13 tháng 4 năm 2017 lúc 18:28Apr 13, 2017 at 18:28
3 Theo trang web của React Static Boilerplate, họ sử dụng các mô -đun CSS - điều này sẽ giải thích lý do tại sao thẻ 8 được tôn trọng nhưng bộ chọn lớp thì không.https://github.com/css-modules/css-modules Hãy thử nhập bảng kiểu như vậy: 9Việc sử dụng nó trong thành phần của bạn như vậy: 0Đã trả lời ngày 13 tháng 4 năm 2017 lúc 19:33Apr 13, 2017 at 19:33
TobytobyToby 12.2k7 Huy hiệu vàng43 Huy hiệu bạc74 Huy hiệu đồng7 gold badges43 silver badges74 bronze badges 4 Tôi đã gặp vấn đề với CSS không được áp dụng, nhưng đó không phải là mô -đun, cuối cùng nó là cú pháp áp dụng nhiều lớp. Cú pháp dưới đây đã giải quyết vấn đề
Đã trả lời ngày 30 tháng 11 năm 2017 lúc 15:22Nov 30, 2017 at 15:22
Tôi bắt gặp một quan sát rằng lỗi đánh máy đã không bị phát hiện, đó là lý do tại sao nó không được áp dụng. Hãy xem bên dưới HTML:
Bây giờ khi trang của tôi được hiển thị, các thuộc tính 1 và 2 đã được áp dụng nhưng thuộc tính 3 không được áp dụng. Trong nhiều giờ, tôi đã thử gỡ lỗi nó và nghĩ rằng nó đang bị ghi đè ở đâu đó.Sau đó, tôi nhận ra rằng chính tả của 4 có lỗi đánh máy. Nhưng động cơ chuyển đổi Babel hoặc công cụ phát triển trong trình duyệt đang ăn lỗi âm thầm khiến mọi thứ trở nên khó khăn để tôi gỡ lỗi. Tôi không biết tại sao bộ chuyển đổi hoặc trình duyệt không phàn nàn trong trường hợp như vậy.Hy vọng thông tin này sẽ giúp ai đó! Đã trả lời ngày 7 tháng 3 năm 2019 lúc 10:41Mar 7, 2019 at 10:41
RBTRBTRBT 22.5K20 Huy hiệu vàng154 Huy hiệu bạc222 Huy hiệu đồng20 gold badges154 silver badges222 bronze badges Tôi biết lý do tại sao nó không được áp dụng. Phải có một nơi nào đó trong trang web của bạn, bạn đã áp dụng localIndentName prop. Điều này thực hiện băm của tên lớp của bạn và do đó, tên lớp băm được tiêm vào thẻ bởi trình tải kiểu nhưng trong DOM, bạn đã tải lớp chưa được tải. Tuân thủ này chỉ băm tên DOM khi bạn sử dụng kiểu CSS-Modules.
Đã trả lời ngày 26 tháng 4 năm 2019 lúc 8:37Apr 26, 2019 at 8:37
0xAnon0xAnon0xAnon 8178 Huy hiệu bạc19 Huy hiệu đồng8 silver badges19 bronze badges Là một nhà phát triển Frontend, bạn cần hiểu tầm quan trọng của tệp CSS. Sai lầm có thể dễ dàng thực hiện trong khi nhập, lưu hoặc đặt tên tệp, có thể tạo lỗi trong quá trình biên dịch mã. Bạn phải luôn lưu tệp bên trong thư mục SRC khi trình biên dịch tự động tìm kiếm thông qua nó cho bất kỳ loại nhập tệp nào. Bạn có thể tham khảo React - Kiểu dáng và CSS trong các tài liệu React để biết thêm thông tin.Giới thiệu Các tệp CSS là các thành phần cốt lõi của dự án nhà phát triển Frontend. Chúng được sử dụng để tạo kiểu và thiết kế các trang web. CSS được sử dụng nội bộ trong các tệp HTML bằng thẻ 5 và bên ngoài bằng cách nhập nó vào tệp HTML cần thiết.Trong hướng dẫn này, bạn sẽ tìm hiểu về các lỗi có thể xảy ra trong khi nhập tệp CSS vào tệp React của bạn.Tổng quan
Mắc lỗi trong tên tệp Chúng tôi sẽ đi qua từng tình huống này.Các tệp chưa được lưu trong thư mục nguồn Bên trong thư mục ứng dụng React, một số thư mục được lưu theo mặc định, chẳng hạn như mô-đun nút, công khai và nguồn. Khi tạo một chương trình, tất cả các mã HTML được lưu trong thư mục công khai và phần còn lại ( 8, 5, v.v.) trong thư mục nguồn.CSS_Files for CSS files. When you run the final code after importing all the required files for testing, an
error will show up on the screen saying, Failed to compile: Module not found. Below is the code for importing the file and the error corresponding to the code:
JavaScript Hãy xem xét một ví dụ: Giả sử bạn muốn tạo các thư mục riêng cho từng loại tệp: công khai cho các tệp HTML, SRC cho các tệp JavaScript và thư mục mới CSS_FILES cho các tệp CSS. Khi bạn chạy mã cuối cùng sau khi nhập tất cả các tệp cần thiết để kiểm tra, một lỗi sẽ hiển thị trên màn hình, không thể biên dịch: Không tìm thấy mô -đun. Dưới đây là mã để nhập tệp và lỗi tương ứng với mã:
JavaScript Lỗi này được tạo vì trình biên dịch chỉ có thể nhập các tệp từ thư mục SRC. Ở đây, tệp CSS được lưu bên ngoài thư mục SRC, vì vậy trình biên dịch không thể nhập nó. Để làm cho mã này hoạt động, bạn chỉ cần lưu tệp CSS bên trong thư mục SRC. Nhưng nếu bạn vẫn muốn tách các tệp, chỉ cần tạo một thư mục mới bên trong thư mục SRC. Dưới đây là mã chính xác để nhập tệp CSS.Đường dẫn không chính xác trong quá trình nhập
JavaScript Như bạn có thể thấy trong mã trên, vấn đề là đúng khi đường dẫn bắt đầu. Mặc dù khai báo một đường dẫn chỉ có hai dấu chấm, trong khi ở đây, ba chấm đã được sử dụng, điều này đang tạo ra lỗi. Dưới đây là mã chính xác để khai báo đường dẫn:
JavaScript Kiểu các thuộc tính saiTrong tệp CSS, tất cả các kiểu dáng diễn ra bên trong các thuộc tính 6 hoặc 7 của một phần tử. Các thuộc tính 6 và 7 cung cấp một nhận dạng duy nhất cho phần tử để thực hiện một số hành động nhất định mà không can thiệp vào phần còn lại của mã. 6 or the 7
attributes of an element. The 6 and 7 attributes provide a unique identification to the element to perform certain actions without interfering with the rest of the code. Hãy xem xét một ví dụ: Giả sử bạn đang tạo một trang web với nhiều div và chỉ tạo kiểu ba div với ID sau: thứ nhất, thứ hai và thứ ba. Nhưng khi bạn chạy mã, bạn chỉ thấy một 4 thay vì ba. Dưới đây là các mã để tạo kiểu, tạo và nhập dữ liệu vào các div. 4 instead of three. Below are the codes for styling,
creating, and entering data into the divs. 0HTML 1CSS 2JavaScript Trong mã trên, kiểu dáng của một số div là không đầy đủ. Điều này đã xảy ra bởi vì trang web chứa nhiều div mà trong khi tạo kiểu cho chúng, một trong số chúng đã kết thúc với một cái tên sai và một cái khác gặp lỗi chính tả. Tên div 5 được trộn lẫn với tên div 6 và div 7 được đánh vần không chính xác. Dưới đây là mã CSS chính xác và kết quả: 5 div name is mixed up with the 6 div name and the 7 div is spelled incorrectly. Below is the correct CSS code and the result: 3CSS Trong mã trên, kiểu dáng của một số div là không đầy đủ. Điều này đã xảy ra bởi vì trang web chứa nhiều div mà trong khi tạo kiểu cho chúng, một trong số chúng đã kết thúc với một cái tên sai và một cái khác gặp lỗi chính tả. Tên div |