test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 03:57:38 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

docs(faq): CSS isolation explanation (#2158)

Browse Source 
Add explanation on how to use CSS isolation with AntDesign Blazor components.

#1822 #732
This commit is contained in:
Dennis Rahmen 2021-12-09 05:46:55 +01:00 committed by James Yeung
parent 240f04f79f
commit 34be016ae2
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/faq.en-US.md
View File

@ -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 `<div>` is enclosing the `<Layout Class="layout">` which is an AntDesign Blazor component.
```
@page "/test" <--- Blazor
<div> <--- HTML
<Layout Class="layout"> <--- 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