子组件在容器组件内时的 Blazor 的 ::deep CSS 功能答案

【问题标题】：Blazor's ::deep CSS feature for child component when it is inside container component子组件在容器组件内时的 Blazor 的 ::deep CSS 功能
【发布时间】：2022-09-28 22:34:16
【问题描述】：

我有 3 个组件：DTMyComponent、DTContainer 和 DTChild。

这是组件的设置：

DTMyComponent.razor

<DTContainer>
    <h1>Parent content</h1>
    <DTChild />
</DTContainer>

DTMyComponent.razor.css

::deep h1{
    color: blue;
}

DTContainer.razor

<div>
    <h1>Container content</h1>
    @ChildContent
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

DTChild

<h1>Child content</h1>

结果是<h1>Child content</h1> 不是蓝色的，正如我所期望的那样。

我预计会是因为它在以下情况下是蓝色的：

DTMyComponent.razor

<div>
    <h1>Parent content</h1>
    <DTChild />
</div>

而且，它不是蓝色的

DTMyComponent.razor

<h1>Parent content</h1>
<DTChild />

但这很好，我读过official documentation，它确实解释了::deep 在没有容器元素的情况下不起作用。

不过，我确实有一个容器零件(DTContainer) 我希望我的DTChild 在里面。

问题是，当我按照我在顶部解释的所有内容进行设置时，我应该在我的DTMyComponent.razor.css 中放入什么 CSS 来定位 DTChild 的 h1 元素？

标签： css blazor

【解决方案1】：

我在这里躲避...

我只是将我的DTMyComponent 中的所有内容都包装在<div> 元素中，如下所示：

<div>
    <DTContainer>
        <h1>Parent content</h1>
        <DTChild />
    </DTContainer>
</div>

现在<h1> 是蓝色的，虽然每个<h1> 都是蓝色的，但这很好，因为我只是为DTChild 设置了一个自定义类，然后它在那个CSS 类上调用了::deep。

随意更改此问题的标题。我不知道如何用几句话更好地解释这种情况。

【讨论】：