我正在尝试使用该 razor 文件的 CSS 隔离文件中的 CSS 类在 Blazor 中设置 NavLink 的样式。 我似乎无法接受全局或内联样式的任何更改。
样本.razor
<NavLink href="" class="cssLink">A Link</NavLink>
sample.razor.css
cssLink {
color: #10069f;
text-decoration: none;
transition: all 0.1s linear;
}
cssLink:hover {
color: #4a4a4a;
text-decoration: none;
}
你这里有两个问题。第一个是 CSS 选择器,因为简单地将 cssLink 写为选择器意味着有一个 cssLink 类型的元素。要按类选择元素,您必须在类名之前放置一个点,这样正确的做法是:
.cssLink {
color: #10069f;
text-decoration: none;
transition: all 0.1s linear;
}
.cssLink:hover {
color: #4a4a4a;
text-decoration: none;
}
第二个问题是由CSS默认行为隔离引起的。默认情况下,不支持子组件,因此定义的样式仅适用于该组件。要解决此问题,您必须使用
::deep
伪元素来告诉 Blazor 它也应该对子组件应用这些规则。您修复的 CSS 代码如下所示:
::deep .cssLink {
color: #10069f;
text-decoration: none;
transition: all 0.1s linear;
}
::deep .cssLink:hover {
color: #4a4a4a;
text-decoration: none;
}