Blazor/Razor组件使用.razor.css时的样式异常问题求助

• Blazor的.razor.css是组件隔离样式，编译时会给每个组件的样式加上唯一的作用域标识（比如b-xxxxxx）。父组件Home里的.aeae会被转成.aeae[b-abc123]，只能匹配Home自己渲染的、带这个标识的元素。
• Test1组件的DOM元素属于它自己的作用域，不会携带Home的作用域标识，所以父组件的隔离样式没法匹配到Test1里的.aeae元素。
• color是CSS继承属性：Test1的DOM嵌套在Home的.aeae容器里，Test1内的元素会继承父容器的color值，所以看起来样式生效了；但border不是继承属性，无法通过继承获取样式，因此不生效。

提供三种可选方案，可根据实际需求选择：

方案1：使用全局样式 #

把.aeae的样式移至全局样式文件（比如wwwroot/css/site.css），全局样式不受组件隔离限制，能作用到所有组件内的.aeae元素：

/* wwwroot/css/site.css */
.aeae {
    border: 1px solid red;
    color: blue;
}

方案2：共享样式文件 #

单独创建共享样式文件，让需要的组件统一引入：

1. 在wwwroot/css下新建SharedStyles.css，写入样式：

.aeae {
    border: 1px solid red;
    color: blue;
}

2. 在Home.razor.css和Test1.razor.css中分别引入该文件：

@import '../wwwroot/css/SharedStyles.css';

方案3：用::deep穿透组件隔离 #

如果需要父组件的隔离样式直接作用于子组件，可使用Blazor提供的::deep伪选择器修改Home.razor.css：

::deep .aeae {
    border: 1px solid red;
    color: blue;
}

::deep会打破组件隔离机制，编译后样式会转换为[b-abc123] .aeae，能匹配父组件作用域范围内的所有.aeae元素，包括子组件内的元素。

内容的提问来源于stack exchange，提问作者Guttizin