From 34be016ae2a327c54aa7957bb9d8b5e0598dfce0 Mon Sep 17 00:00:00 2001 From: Dennis Rahmen Date: Thu, 9 Dec 2021 05:46:55 +0100 Subject: [PATCH] docs(faq): CSS isolation explanation (#2158) Add explanation on how to use CSS isolation with AntDesign Blazor components. #1822 #732 --- docs/faq.en-US.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/faq.en-US.md b/docs/faq.en-US.md index ecc9ee8c..49e57af6 100644 --- a/docs/faq.en-US.md +++ b/docs/faq.en-US.md @@ -37,6 +37,29 @@ Try [Space](https://antblazor/components/space) component to make them aligned. [https://opencollective.com/ant-design-blazor](https://opencollective.com/ant-design-blazor) +### Why is CSS isolation not working for Ant Design Blazor components + +Blazor applies scope attributes only to native HTML elements to enable CSS isolation. [Official documentation](https://docs.microsoft.com/zh-cn/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0&WT.mc_id=DT-MVP-5003987#child-component-support) +This does not include AntDesign Blazor components, thus these components need to be wrapped in a native HTML element to support CSS isolation. + +As you can see, the `
` is enclosing the `` which is an AntDesign Blazor component. +``` +@page "/test" <--- Blazor +
<--- HTML + <--- AntDesign +[...] +``` +More explanation in [Zonciu´s comment](https://github.com/ant-design-blazor/ant-design-blazor/issues/732#issuecomment-739125806) + +Now you can create a ".razor.css" file for that page and add your CSS for the "layout" class of the Layout AntDesign component. +``` +::deep .layout { + background: #fff; +} +``` +The `::deep` prefix has to be used on all the CSS for AntDesign Blazor components using CSS isolation. +If you get warnings like "`::deep` is not a valid pseudo-element." then you can ignore these. [See the documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#child-component-support) + --- ## Errors and Warnings