Blazor中的CSS隔离问题(3)

{ "commands": { "scss": { "fileName": "cmd.exe", "workingDirectory": ".", "arguments": "/c scss.bat" } }, "-vs-binding": { "BeforeBuild": [ "scss" ] } }

接下来，只需要直接运行程序，即可以看下效果。

当然在SCSS中，我们也可以使用”::deep“标记，其也能正确的显示，例如：

/* Pages/Index.razor.scss */ .my-text { border: 2px solid #000; padding: 16px; ::deep { .my-text { border: 2px solid #ff0000; background-color: #000; color: #fff; } } } /* Components/Child.razor.scss */ h1 { background-color: #efefef; font-weight: 700; }

对应的Razor组件如下：

/* Pages/Index.razor */ @page "/" <div class="my-text"> Welcome to your new app. <CssIsolation.Components.Child /> </div> /* Components/Child.razor */ <h1>Child</h1> <div class="my-text"> 这是子组件 </div>

其运行效果如下：

但是，个人感觉，在SCSS中使用”::deep“标记可能会有点混乱，建议要么不使用”::deep“标记，要么将”::deep“标记放在最外层，即如下的形式。

// 一些SCSS样式代码 ... ::deep { // 子组件的一些SCSS样式代码 ... } // 一些SCSS样式代码 ...

6.修改随机属性标识

前面有提到，Blazor默认生成随机属性名的形式是以“b-”开头加10个随机字符，在微软的官方文档中显示这个是可以更改的。这对于自家的应用来说，是比较友好的，比如小米可以定义随机属性形式是以”mi“开头，淘宝可以定义随机属性形式是以”tb“开头等等。但是，此功能似乎还存在有问题，有人已经在Github提出了issue——Custom CSS Scope Identifier not working，希望Blazor能够越来与完善。

（编辑：ASP站长网）