Blazor NavLink 样式与 CSS 隔离中的类

Question

我正在尝试使用该 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;
}

Answer 1

你这里有两个问题。第一个是 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;
}