Dotnet9

联系请关注微信公众号:Dotnet9

文章

(15/30)大家一起学Blazor:CSS isolation(隔离)

StrayaWorker 2021-12-18 22:35:17 Blazor 26
有时候会想对不同Component 做个别样式设置,但如果把class 都写在`wwwroot/css/site.css`,或是针对某个元素改动样式,可能导致改一个就影响全部Component,这种全域冲突是必须避免的,但应该怎么做?

CSS isolation 介绍

有时候会想对不同Component 做个别样式设置,但如果把class 都写在wwwroot/css/site.css,或是针对某个元素改动样式,可能导致改一个就影响全部Component,这种全域冲突是必须避免的,但应该怎么做?

.NET 5 推出了CSS isolation(CSS 隔离),建立Component 个别css 文件,命名规范为{Component name}.razor.css,文件会自动跟 {Component name}.razor 合并在一起,且名称不分大小写。下图可以看到不论是 Blog.razor.css 还是 blog.razor.css 都会跟 Blog.razor 被视为同一组。

CSS isolation 会在创建时被处理,Blazor 会改写CSS 选择器并产生一个 {Project name}.style.css 文件,可以在 wwwroot/index.html (Blazor WebAssembly) 或是 Pages/_Layout.cshtml (Blazor Server) 的 标签内找到引用路径,由于这是创建时才会产生,所以在项目内是看不到的,我们打开浏览器的Dev tool 并切换到Sources 页签,就能看到这文件。

有人可能会发现为何class 后面连接着没有看过的内容,例如 .page[b-mxoy4q7bj7] 或是.main[b-mxoy4q7bj7],这是Blazor 用来识别CSS 选择器作用在哪个Component 的区域识别码,格式为b-10 位数字及英文字母,每个Component 的区域识别码都是独一无二的,可知这里的 .main.page class 只作用于 [b-mxoy4q7bj7] 对应的Component,注释写着/* _content/BlazorServer/Shared/MainLayout.razor.rz.scp.css */,打开Shared/MainLayout.razor.css,的确看到了 .main.page class,rz.scp.css附件名是用来识别CSS 选择器属于哪个Component。

我们在 Blog.razor.css 加上一段针对label 的样式修改,按下 ctrl + shift + B 生成项目,再看网页就能看到文字颜色改变了,BlazorServer.style.css也能看到 Blog.razor.rz.scp.css 的样式区块多了一段label[b-0ae5hiw99t]

套用样式到Child Component

如果想对Post Component 的label 元素套用相同样式,又不想分别建立razor.css 文件呢?Blazor 提供了方便的做法,只要在CSS 选择器前面加上 ::deep 即可,我们在 Blog.razor.css 的label 前面加上::deep,就能看到Post 的label 元素颜色都改变了,BlazorServer.style.css的class 也从 label[b-0ae5hiw99t] 变成了[b-0ae5hiw99t] label

不过要注意的是,必须有父子关系 ::deep 才能生效,Parent Compoent 的区域识别码仅作用于 <div> 标签,如果Child Component 没有被 <div> 标签包住就不会生效。我们把 Blog.razor 中包住Post Component 的 <div> 标签都注释,保存后再去网页看,发现 <label> 文字颜色都变回黑色了,但 BlazorServer.style.css 的class 仍旧是[b-0ae5hiw99t] label

引用:

  1. ASP.NET Core Blazor CSS isolation

注:本文代码通过 .NET 6 + Visual Studio 2022重构,可点击原文链接与重构后代码比较学习,谢谢阅读,支持原作者

留言

回复