Blazor中的CSS隔离问题分析

这篇文章主要介绍“Blazor中的CSS隔离问题分析”，在日常操作中，相信很多人在Blazor中的CSS隔离问题分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Blazor中的CSS隔离问题分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联建站服务项目包括安丘网站建设、安丘网站制作、安丘网页制作以及安丘网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，安丘网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到安丘省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

1.环境

VS 2019 16.9.0 Preview 1.0

.NET SDK 5.0.100

2.前言

CSS一旦生效，就会应用于全局，所以很容易出现冲突。为了解决这个问题CSS隔离就顺势而生。Blazor诞生于2018年，至今为止已经2年多了，然而CSS隔离直至.NET 5出现才支持。

3.Razor组件间隔离

Razor组件间CSS隔离应当是使用最为简单，也是使用最为方便的一种CSS隔离方式。实现Razor组件间CSS隔离非常简单，只需要在组件所在的目录下建立同名的“.razor.css”文件即可——若文件夹A下存在名为“Component.razor”的组件，则只需要在文件夹A下建立“Component.razor.css”，即可实现为“Component.razor”组件设置单独的样式而不影响其他组件。

以默认模板为例，新建“Index.razor.css”，其内容如下：

h2 {
    font-size: 48px;
    font-weight: bold;
}

新建“Counter.razor.css”，其内容如下：

h2 {
    font-size: 16px;
    font-weight: 400;
}

其效果如下：

Blazor中的CSS隔离问题分析

上面的组件CSS文件将会被生成为“项目名.styles.css”的文件，在.NET 5中会被默认添加到“index.html”中，如上两个CSS文件会被编译为如下结果：

/* /Pages/Counter.razor.rz.scp.css */
h2[b-g5zg69lne1] {
    font-size: 16px;
    font-weight: 400;
}
/* /Pages/Index.razor.rz.scp.css */
h2[b-f3rb2cn7la] {
    font-size: 48px;
    font-weight: bold;
}

在浏览器中查看DOM元素，其结果如下：

Hello, world!

Counter

也就是说，这两个组件内的DOM被添加上了一个以“b-”开头加10个随机字符的属性，这似乎与Angular相似（本人没有用过，只是在浏览器中见到过类似的东西）。Blazor中的CSS隔离，似乎是通过随机属性名来实现的。那么，通过id和class生成styles.css是什么样的呢？其同样是通过随机属性名来实现的。例如，下面一段组件CSS文件，

#zxyao-a {
    font-size: 48px;
    font-weight: bold;
}

#zxyao-b {
    font-size: 24px;
    font-weight: bold;
    background-color: #ff0000;
    padding: 16px;
}

.zxyao-cls {
    font-size: 24px;
    font-weight: bold;
    background-color: #000;
    color: #fff;
    padding: 16px;
}

其会被编译成如下结果：

/* /Pages/Index.razor.rz.scp.css */
#zxyao-a[b-f3rb2cn7la] {
    font-size: 48px;
    font-weight: bold;
}

#zxyao-b[b-f3rb2cn7la] {
    font-size: 24px;
    font-weight: bold;
    background-color: #ff0000;
    padding: 16px;
}

.zxyao-cls[b-f3rb2cn7la] {
    font-size: 24px;
    font-weight: bold;
    background-color: #000;
    color: #fff;
    padding: 16px;
}

其结果如下：

Blazor中的CSS隔离问题分析

也就是说，无论组件CSS文件汇总如何写，其都会转化为CSS选择器[随机属性]的形式。

4.CSS隔离的子组件支持

默认情况下，组件CSS仅仅只会应用都当前组件。例如，有以下两个组件：

/* Index.razor */

    Welcome to your new app.

/* Components/Child.razor */

Child

这是子组件

那么其仅仅只对”Index.razor“起作用——border出现在最外层 Index 组件上。

如果想让其对本组件及其子组件”.my-text“元素起作用，可以使用”::deep“进行标记：

是不是发现，本组件的“.my-text”的border没了。如前面所讲，在这里，::deep将会被随机属性所替代，也就是说，其编译结果如下：

如果本组间没有唯一的父元素标签，则本组间中的每一个原生的HTML标签都会有相同的随机属性，例如下面这个组件，其“div”与“h2”都会具有相同的随机属性，并会用改属性替代“::deep”标识。“Child“组件中的元素将不会出现改随机属性。

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

/* 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 */ h2 { background-color: #efefef; font-weight: 700; }

大橙子网站建设，新征程启航

Blazor中的CSS隔离问题分析

Child

Welcome to your new app.

Child

其他资讯