使用CSS隔离时无法设置NavLink的样式

Question

我正在尝试在我的主菜单按钮的组件。

<NavLink href="@Href" title="@Title">
<div class="main-menu-button">
<img src="@IconUrl" />
<div class="label">
@Label
</div>
</div>
</NavLink>
@code {
[Parameter]
[EditorRequired]
public string? Href { get; set; }
[Parameter]
[EditorRequired]
public string? Label { get; set; }
[Parameter]
public string? Title { get; set; }
[Parameter]
[EditorRequired]
public string? IconUrl { get; set; }
}

我似乎无法在我的css文件中定位NavLink。我已经尝试了所有这些不同的变化，但这个按钮在激活时永远不会改变颜色。

::deep a.active {
background-color: red !important;
}
::deep .active {
background-color: green !important;
}
::deep a .active {
background-color: blue !important;
}
a.active {
background-color: yellow !important;
}
a .active {
background-color: orange !important;
}

我可以看到active类是存在的，当我检查元素。我知道我的CSS隔离是有效的，因为我能够添加针对内部元素的样式。

这个问题并不局限于active类。我也无法目标的NavLink元素设置'text-decoration:none在css。

Answer 1

Css隔离通过向组件的所有html元素添加自定义作用域标识符来实现。因此，您编写的css

::deep a.active {
background-color: red !important;
}

变成如下所示的

[b-zbwm49ki0i] a.active {
background-color: red !important;
}

以上css，表示select all a elements that have an active class that are inside elements that have a b-zbwm49ki0i attribute。在您的示例中，没有具有自定义作用域标识符的元素作为Navlink的父元素，因此没有应用css。换句话说，您需要将NavLink包装在div中才能应用css。这样可以确保链接位于具有自定义作用域标识符的元素中。

<div>
<NavLink href="@Href" title="@Title">
<div class="main-menu-button">
<img src="@IconUrl" />
<div class="label">
@Label
</div>
</div>
</NavLink>
</div>