Làm cách nào để áp dụng CSS trên toàn cầu trong Angular?
|
Vì vậy, bây giờ chúng ta đã biết cách thêm các biểu định kiểu tùy chỉnh và đóng gói chúng bên trong một thành phần. Bây giờ, hãy xem cách chúng tôi có thể thêm một số kiểu toàn cầu và chúng tôi đã thực hiện việc này về mặt kỹ thuật. Nếu bạn mở phong cách của chúng tôi. css ở đây trong thư mục gốc. Bạn có thể thấy rằng chúng tôi đã có một số phong cách phổ quát ở đây. Chúng tôi chỉ có một phần thân nhưng chúng tôi có thể rất dễ dàng đến với thành phần tài liệu của mình tại đây và loại bỏ mã đó Show
Bạn có thể thấy rằng chúng tôi đã trở lại với màu than đó. Và nếu tôi đến đây và thêm vào lớp học này. Bạn có thể thấy rằng điều đó quan tâm đến nó. Bây giờ nếu bạn đang tự hỏi điều gì sẽ xảy ra nếu nói rằng bạn có một mục khác và bạn muốn có một màu khác, bạn có thể quản lý mục này trên cơ sở thành phần để bạn có thể ghi đè kiểu này vì vậy nếu tôi muốn thay đổi mục này từ trắng sang đỏ . thành phần. css nhấn lưu và bạn có thể thấy rằng bây giờ nó có màu đỏ Tôi sẽ loại bỏ nó hoàn toàn vì tôi thích nó có màu trắng, đó là màu tôi muốn đi cùng Bây giờ bởi vì chúng tôi đã thêm điều này vào phong cách của chúng tôi. css trong thư mục gốc của hệ thống. Bây giờ chúng ta có thể có một bộ phong cách đầy đủ và nó có sẵn cho tất cả các thành phần khác của chúng ta. Bây giờ đây là một ứng dụng rất cơ bản. Không có quy tắc nào nói rằng phong cách của bạn cần phải ở gốc. Bạn có thể đặt chúng ở bất cứ đâu. Bạn có thể làm điều gì đó như nói rằng bạn muốn đặt nó vào trong thư mục ứng dụng. Tôi có thể đến đây nhấp vào kiểu và thêm thư mục này vào đây và sau đó chúng ta có thể. Kéo cái này lên trong Finder. Và chúng ta có thể kéo tệp kiểu của mình vào thư mục kiểu Sau đó, để nó hoạt động, chúng ta có thể mở chỉ mục của mình, bởi vì ngay bây giờ nếu bạn để ý nếu bạn đến đây và nhấn làm mới, tất cả các kiểu chính của chúng ta sẽ biến mất, các kiểu tùy chỉnh của chúng ta sẽ biến mất. Vì vậy, cách mà bạn có thể cập nhật điều này là trong chỉ mục. tệp html. Bạn có thể đến đây và nói Bây giờ chúng ta đã sắp xếp chúng tốt hơn một chút thay vì chỉ có một tệp kiểu ở đây. Bây giờ chúng tôi có toàn bộ thư mục bên trong ứng dụng. Và điều này thật tuyệt vì chúng tôi có thể sắp xếp bất kỳ kiểu bổ sung nào, vì vậy, giả sử bạn mang theo một số mẫu có 75 tệp kiểu khác nhau. Bạn sẽ không muốn những thứ đó ở đây trong thư mục gốc nhưng bạn có thể muốn chúng có sẵn cho toàn bộ ứng dụng. Vì vậy, không có lý do gì mà chúng phải được lưu trữ ở thư mục gốc, bạn có thể đặt chúng ở bất kỳ đâu trong ứng dụng mà bạn muốn. Đó là một điều tôi thích về cách quản lý nội dung hình khuyên như tệp CSSA mang lại cho bạn rất nhiều tính linh hoạt và bạn có thể tạo kiểu cho chúng hoặc bạn có thể cấu trúc kiến trúc của mình theo cách bạn sắp xếp tệp của mình. Tuy nhiên bạn thấy tốt nhất Trong bài đăng này, chúng ta sẽ tìm hiểu cách hoạt động của cơ chế tạo kiểu Angular mặc định (Đóng gói mô phỏng) và chúng ta cũng sẽ đề cập đến hỗ trợ Sass của Angular CLI và một số phương pháp hay nhất về cách tận dụng nhiều tính năng Sass có sẵn Chúng ta sẽ nói về thời điểm sử dụng từng tính năng và tại sao, nói về lợi ích của việc cách ly kiểu thành phần và cũng đề cập đến cách gỡ lỗi các kiểu của chúng ta nếu có điều gì đó không hoạt động Đây là bài thứ hai của loạt bài hai phần về Kiểu dáng thành phần góc, nếu bạn đang muốn tìm hiểu về ngClass và ngStyle, hãy xem phần một Góc ngClass và ngStyle. Hướng dẫn hoàn chỉnh Mục lụcBài đăng này sẽ bao gồm các chủ đề sau
Để bao quát từng tính năng, chúng tôi sẽ thêm nhiều ví dụ vào ứng dụng mẫu Angular CLI nhỏ này, ứng dụng này sẽ sử dụng làm kiểu bên ngoài cho chủ đề mặc định của Bootstrap Tại sao cách ly phong cách?Vì vậy, không cần phải chần chừ thêm nữa, hãy bắt đầu với phần tìm hiểu sâu về Cách ly phong cách góc cạnh của chúng tôi. Câu hỏi đầu tiên xuất hiện trong đầu là tại sao chúng ta lại muốn tách biệt các kiểu thành phần của mình? Khi chúng tôi phát triển bộ kiểu dáng thành phần cho một ứng dụng, chúng tôi có xu hướng gặp phải các tình huống trong đó kiểu dáng từ một tính năng bắt đầu can thiệp vào kiểu dáng của tính năng khác Điều này là do các trình duyệt chưa hỗ trợ rộng rãi cho cách ly kiểu, nơi chúng tôi có thể hạn chế một kiểu chỉ được áp dụng cho một phần cụ thể của trang Nếu chúng tôi không cẩn thận và sắp xếp các kiểu của mình một cách có hệ thống để ngăn chặn vấn đề này (ví dụ: sử dụng một phương pháp như SMACSS), chúng tôi sẽ nhanh chóng gặp phải các vấn đề về bảo trì CSS Sẽ thật tuyệt nếu có thể tạo kiểu cho các thành phần của chúng ta chỉ bằng các bộ chọn ngắn, đơn giản và dễ đọc mà không phải lo lắng về tất cả các tình huống trong đó các kiểu đó có thể vô tình bị ghi đè phải không? Một lợi ích khác của cách ly phong cáchĐây là một kịch bản khác. chúng tôi đã thử sử dụng thành phần của bên thứ ba bao nhiêu lần, thêm nó vào ứng dụng của mình chỉ để phát hiện ra rằng thành phần đó đã bị hỏng hoàn toàn do các vấn đề về kiểu dáng? Cách ly kiểu sẽ cho phép chúng tôi gửi các thành phần của mình khi biết rằng các kiểu của thành phần đó (rất có thể) sẽ không bị ghi đè bởi các kiểu khác trong ứng dụng đích Điều này làm cho thành phần có thể tái sử dụng hiệu quả hơn nhiều, bởi vì thành phần bây giờ trong hầu hết các trường hợp sẽ chỉ hoạt động, bao gồm các kiểu Đóng gói chế độ xem góc mang lại cho chúng ta tất cả những lợi thế này, vì vậy hãy tìm hiểu cách thức hoạt động của nó Bản trình diễn đóng gói mô phỏng gócTrong phần này, chúng ta sẽ xem cách hoạt động của kiểu dáng thành phần Angular dưới mui xe, vì đây là cách tốt nhất để hiểu nó. Điều này cũng sẽ cho phép chúng tôi gỡ lỗi cơ chế nếu cần Đây là video trình diễn cơ chế mặc định đang hoạt động Để hưởng lợi từ cơ chế đóng gói chế độ xem mặc định của Angular, tất cả những gì chúng ta cần làm là thêm các lớp CSS của mình vào một tệp CSS bên ngoài Nhưng sau đó, thay vì thêm tệp này vào Màu đỏ sau đó sẽ được áp dụng cho nút này, như mong đợi. Nhưng nếu bây giờ chúng ta có một nút khác, chẳng hạn như trực tiếp ở cấp độ của Nếu bạn không biết rằng có một số loại cơ chế cách ly kiểu đang hoạt động, bạn có thể ngạc nhiên khi biết rằng nút này KHÔNG có nền đỏ Chuyện gì đang xảy ra ở đây vậy? Cách ly kiểu góc hoạt động như thế nào?Để hiểu rõ hơn cách đóng gói chế độ xem mặc định hoạt động, hãy xem phần tử HTML tùy chỉnh Một số điều đang diễn ra ở cấp độ HTML thời gian chạy
Những tính chất này là gì?Vậy các thuộc tính này hoạt động như thế nào? Để đơn giản, chúng tôi sẽ xác định kiểu nội tuyến cho thành phần này bên cạnh mẫu Và sử dụng thành phần mới được xác định này, chúng tôi sẽ thêm nó vào mẫu của thành phần gốc ứng dụng
Thuộc tính cách ly kiểu phần tử máy chủ và phần tử mẫuVới thành phần thứ hai này đã sẵn sàng, chúng ta hãy có một cái nhìn thứ hai về HTML. Cách thức hoạt động của hai thuộc tính này sẽ trở nên rõ ràng hơn nhiều Lưu ý phần tử Phần tử Nhưng bây giờ, các phần tử bên trong mẫu Tóm tắt về cách hoạt động của các thuộc tính phần tử máy chủ và mẫuSau đó, hãy tóm tắt cách các thuộc tính HTML đặc biệt này hoạt động và sau đó xem cách chúng kích hoạt tính năng cách ly kiểu
Đây là tất cả minh bạch và được thực hiện dưới mui xe cho chúng tôi Làm cách nào để các thuộc tính này cho phép đóng gói chế độ xem?Sự hiện diện của các thuộc tính này có thể cho phép chúng tôi viết các kiểu CSS theo cách thủ công, được nhắm mục tiêu nhiều hơn chỉ là các kiểu đơn giản mà chúng tôi có trên mẫu của mình Ví dụ: nếu chúng ta chỉ muốn phạm vi màu xanh lam cho thành phần Mặc dù kiểu 1 có thể áp dụng cho bất kỳ phần tử nào có lớp Vì vậy, điều này có nghĩa là kiểu 2 chỉ có phạm vi hiệu quả đối với các thành phần của mẫu thành phần Vì vậy, bây giờ chúng ta có thể thấy cách hai thuộc tính đặc biệt đó kích hoạt một số kiểu cách ly, nhưng sẽ rất cồng kềnh nếu phải sử dụng các thuộc tính đó theo cách thủ công trong CSS của chúng ta (và trên thực tế, chúng ta không nên làm vậy)
Làm thế nào để góc đóng gói phong cách?Khi khởi động (hoặc lúc xây dựng nếu sử dụng AOT), Angular sẽ xem kiểu nào được liên kết với thành phần nào, thông qua thuộc tính thành phần Sau đó, Angular sẽ lấy các kiểu đó và áp dụng chúng một cách rõ ràng với các thuộc tính cách ly tương ứng, sau đó sẽ đưa các kiểu trực tiếp vào tiêu đề trang dưới dạng thẻ Thuộc tính Và đó là cách hoạt động của cơ chế đóng gói chế độ xem mặc định của Angular Cơ chế này không chống đạn 100% vì nó không đảm bảo khả năng cách ly hoàn hảo, nhưng trên thực tế, nó gần như luôn hoạt động Cơ chế này không dựa trên DOM bóng tối mà thay vào đó là các thuộc tính HTML đặc biệt này, vì vậy nếu chúng tôi thực sự muốn, chúng tôi vẫn có thể ghi đè các kiểu này Nhưng do cơ chế cách ly Shadow Dom gốc hiện chỉ khả dụng trong Chrome và Opera, chúng tôi chưa thể dựa vào nó Cơ chế này rất hữu ích vì nó cho phép chúng ta viết các kiểu đơn giản không dễ bị phá vỡ, nhưng đôi khi chúng ta có thể muốn phá vỡ sự cô lập này một cách có chọn lọc Hãy tìm hiểu một vài cách để làm điều đó và tại sao chúng ta muốn làm điều đó Bộ chọn lớp giả ng set defaults.styleExt scss 2Đôi khi, chúng tôi muốn tạo kiểu cho chính phần tử HTML tùy chỉnh của thành phần chứ không phải thứ gì đó bên trong mẫu của nó Ví dụ, giả sử rằng chúng ta muốn tạo kiểu cho chính thành phần Chúng tôi không thể làm điều đó bằng cách sử dụng các kiểu bên trong tệp liên kết Điều này là do tất cả các kiểu bên trong tệp đó sẽ nằm trong phạm vi các thành phần của mẫu chứ không phải chính thành phần bên ngoài Nếu chúng ta muốn định kiểu phần tử máy chủ của chính thành phần đó, chúng ta cần bộ chọn lớp giả Bộ chọn này sẽ đảm bảo các kiểu đó chỉ nhắm mục tiêu phần tử Việc sử dụng Nếu bạn muốn xem minh họa trực quan về hoạt động của bộ chọn lớp giả Kết hợp bộ chọn ng set defaults.styleExt scss
|
