css - 更改所选选项卡的颜色，TabMenu PRIMENG - 样式

Question

我正在使用primeng组件选项卡菜单。 https://www.primefaces.org/primeng/#/tabmenu 我找不到将所选标签的颜色更改为不同颜色的方法。

Answer 1

很抱歉延迟回答。请记住，您应该:host ::ng-deep在您的 css 类之前添加以覆盖任何样式

:host ::ng-deep .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active {
    background-color: #d90096; //<Replace your custom color>
    border: 1px solid #d600d9;
}

希望它会节省您的时间。

Answer 2

你有没有尝试过：

    body .ui-tabview.ui-tabview-top .ui-tabview-nav li.ui-state-active {
    background-color: red;
}

来源： https ://forum.primefaces.org/viewtopic.php?t=58188

Answer 3

您可以覆盖其默认的 CSS 选择器，如下所示：

body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active {
    background-color: #d90096; //<Replace your custom color>
    border: 1px solid #d600d9;
}

用户上部标签绑定的另一种方法<li>

li.ui-tabmenuitem.ui-state-default.ui-state-active {
   background-color: #d90096; //<Replace your custom color>
   border: 1px solid #d600d9;
}

您需要同时更改背景颜色和边框，以便应用。

您可以从演示 UI 进行检查并在那里进行动态更新，有关更多信息，请参阅下面的屏幕截图。

希望这会有所帮助！

Answer 4

这对我有用。ui-tabview-selected 将更改所选选项卡的颜色。应添加 ui-state-default.ui-state-active 背景以赋予剩余区域颜色。

.ui-tabview .ui-tabview-nav li.ui-tabview-selected a {  
    background-color: rgb(57, 235, 175);
}

.ui-tabview .ui-tabview-nav li.ui-state-default.ui-state-active {
    background: #f55555;
}

试试这个链接 Styling PrimeNG p-tabView，我得到了一些代码并在我的代码上修改了它。

对于这个“你知道封装：ViewEncapsulation.None 是什么吗？”。参考这一行可以更好地理解。

ViewEncapsulation.Native、ViewEncapsulation.None 和 ViewEncapsulation.Emulated 之间的区别