Blazor CSS 隔离要点

ASP.NET Core Blazor CSS 隔离

起因

在 Blazor 组件(Components)/页面(Pages)中, 难免有自定义的样式需要设置，查询 ASP.NET Core Blazor 文档后，发现了 CSS 隔离，但是反复尝试终不生效。

解决

经过多方搜索后，找到了解决方案，发现是使用方式不对，Blazor CSS 隔离 要求使用 css class 的组件必须在 HTML 原生 Tag 内，所以需要将 Blazor 放到原生 HTML Tag 中。

完整步骤如下:

以基于 MudBlazor 的项目为例, 假设项目名为 WebUI

创建 Page (例: Components/Pages/Demo.razor)

@page "/demo"

<PageTitle>Demo</PageTitle>

<MudText Typo="Typo.body2" class="custom-text">Vector</MudText>

创建隔离 CSS 文件 (例: Components/Pages/Demo.razor.css)
```
::deep .custom-text {
 color: #fa1;
 font-size: 1.5rem;
}
```
在 Components/App.razor 中 <head> </head> 之间添加如下代码, 引用 CSS 隔离 bundle 文件:
```
<link href="@(nameof(WebUI)).styles.css" rel="stylesheet" />
```
这是发现是无效的，需要将 Page 中的 <MudText class="custom-text" ... 放到 HTML Tag 中(比如 div`), 修改后如下:
```
@page "/demo"

<PageTitle>Demo</PageTitle>

<div>
<MudText Typo="Typo.body2" class="custom-text">Vector</MudText>
<div>
```
再次运行即可生效。

注意: 编辑 css 文件后若重新运行未生效，可以尝试 Ctrl + F5 刷新缓存。

参考

MudAutoComplete - CSS Isolation of .mudpopover #1606
As I told you, you need to wrap the component in an html element, for example, in a div
<div>
  <MudPaper>
      <MudAutocomplete/>
  </MudPaper>
</div>
And then in your MyComponent.razor.css file, put your css code with deep
::deep .mud-popover {
    width: 600px !important;
    background-color: aliceblue !important;
}

Blazor CSS 隔离要点

起因

解决

参考

MudAutoComplete - CSS Isolation of .mudpopover #1606

评论 (0)