样式：如何覆盖活动元素上的 primeng tabmenu 边框颜色

Question

我目前有一个全局蓝色主题 (saga-blue)。我设法通过使用简单的 css.

来更改文本和底部边框颜色（以匹配所需的品牌颜色）

但是，当第一次选择菜单项时，它后面会出现难看的蓝色边框，如下所示： https://imgur.com/SYF7xmJ

无论 CSS 我怎样尝试，都无法删除它。当我检查元素时，我找不到它的来源。此外，只要我点击屏幕上的其他任何地方，它就会被删除：它只在第一次点击该项目时出现，在任何其他点击后消失。

我试过的

CSS：


.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
    color: $brand-red;
    border-left: 0px !important;
    border-right: 0px !important;
}

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
    color: $brand-red;
    border-left: 0px !important;
    border-right: 0px !important;
}

我还尝试取消设置与 menuitem 和 menulink 组件上的 'left' 或 'right' 有关的任何属性 - 但丑陋的蓝色边框一直显示。如果有人知道这可能是什么样的属性，我将不胜感激。

Answer 1

尝试outline: 0这是默认浏览器主要为可访问性所做的事情。

Answer 2

如果您的样式未被应用并且您想覆盖 primeng 默认样式，您可能需要使用 :host ::ng-deep。

另一种将样式应用于 PrimeNG 组件嵌套元素的方法是使用 styleClass 模板属性。它并非每次都有效，您有时需要通过 !important 优先级修饰符强制 css。这不是最干净的方法，但很少 CSS 属性是通过计算在某些组件上内联的。

对于您的特定问题，当元素处于焦点状态时，.p-tabmenu（和子classes）正在使用焦点混合。

@mixin focused() {
    outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: $focusShadow;
}

你需要玩玩属性 box-shadow 到 remove/modify 这种你不喜欢的模糊颜色，如果你没有应用我给你的 primeng 样式建议希望。

在覆盖样式时不要忘记伪class :focus。

你可能会有这样的结果把它彻底去掉

:host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
     box-shadow: none;
}

样式：如何覆盖活动元素上的 primeng tabmenu 边框颜色

styling: how to override primeng tabmenu border-colors on active element

css

primeng