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

Question

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

Answer 1

你试过了吗：

    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 2

您可以覆盖其默认的 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;
}

您需要同时更改 background-color 和 border 以便应用。

您可以从演示UI中查看并在那边进行实时更新，有关更多信息，请参阅下面的屏幕截图。

希望这对您有所帮助！

Answer 3

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

: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 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;
}

试试这个 link ，我得到了一些代码，并在我的代码上进行了修改。

为此"Do you know what encapsulation: ViewEncapsulation.None is?"。参考这一行，您可以更好地理解。

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

Change the color of selected Tab, of TabMenu PRIMENG - style

css

angular

ionic-framework

primeng

tabmenu