Blazor子组件未继承父组件表格样式问题

问题概述 #

开发了包含HTML表格的Blazor父组件ParentComponent，以及用于展示详情的子组件LoanDetail（ChildComponent）。点击表格行时条件显示子组件，但子组件内容仅显示无样式纯文本，无法继承父组件定义的CSS样式。尝试将父组件CSS类复制到子组件的.razor.css文件中也无效果。

问题原因 #

1. Blazor CSS隔离机制：默认情况下，每个组件的.razor.css文件是作用域隔离的，样式仅对当前组件内的元素生效，不会自动渗透到子组件。
2. 子组件HTML语法错误：ChildComponent.razor中存在无效的DOM结构，第一行多余的class="loan-detail-group-container">会导致样式无法正确解析。

解决方案 #

步骤1：修复子组件HTML语法错误 #

将ChildComponent.razor中的错误代码：

<div class="card-body">
     class="loan-detail-group-container">

修正为正确的嵌套结构：

<div class="card-body">
    <div class="loan-detail-group-container">

步骤2：选择以下一种方式解决样式隔离问题 #

方式一：使用::deep伪类穿透样式隔离

在ParentComponent.razor.css中，为需要作用到子组件的CSS类添加::deep前缀，让样式穿透到子组件：

::deep .loan-detail-group-label {
    width: 29%;
    float: left;
    overflow: hidden;
    background-color: #eeeeee;
    border-style: solid;
    border-width: thin;
    border-right-width: 0px;
    border-color: silver;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    text-align: right;
    padding-top: 5px;
    padding-right: 7px;
    padding-bottom: 5px;
    padding-left: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
    height: 34px;
    font-weight: bold;
}

::deep .loan-detail-group-data {
    width: 67%;
    float: left;
    overflow-x: hidden;
    overflow-y: visible;
    white-space: pre-line;
    background-color: white;
    border-style: solid;
    border-width: thin;
    border-color: silver;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: left;
    padding-top: 6px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 7px;
    margin-top: 2px;
    margin-bottom: 2px;
    height: 34px;
}

方式二：将共享样式移至全局样式文件

把loan-detail-group-label、loan-detail-group-data这类共享CSS类，复制到项目的全局样式文件（如wwwroot/css/site.css）中，这样所有组件都能直接使用这些样式，无需考虑隔离问题。

方式三：复制样式到子组件（不推荐，冗余）

若坚持在子组件中复制样式，确保ChildComponent.razor.css中的类定义完全一致，且没有语法错误。但此方式会导致代码冗余，不利于维护。

验证 #

完成上述修改后，重新编译并运行项目，点击表格行展开子组件，即可看到样式正常应用。

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