如何覆盖primeng样式？答案

【问题标题】：How to override primeng styles?如何覆盖primeng样式？
【发布时间】：2019-08-05 02:42:37
【问题描述】：

我需要在我的项目中使用 PrimeNG。我想设置Panel Menu 的样式。

我需要更改边框颜色和背景。

HTML：

<img class="logo" src="../../../assets/images/MenuLogo.png">
<p-panelMenu [model]="items"></p-panelMenu>

SCSS：

:host {
    ::ng-deep .ui-panelmenu
    {
        width: 250px;
        border: 0px;
        .ui-panelmenu-header
        {
            border: none;
        }
    }
} 
.logo
{
    width: 250px;
}
.test
{
    border: 0px solid black;
}

如果我像这样使用您的代码，我想首先消失边框和背景：

HTTP：

<img class="logo" src="../../../assets/images/MenuLogo.png">
<p-panelMenu [style]="{'border':'none', 'background-color':'none'}" [model]="items"></p-panelMenu>

我有这个：

但是想要这个：

【问题讨论】：

标签： html css angular styles primeng

【解决方案1】：

这对我有用：

HTML：

<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>

CSS（视图的）：

:host>>>.ui-state-default {
    background: #246bc2!important;
    color: #FFFFFF!important;
}

:host>>>.ui-menuitem-text {
    color: #FFFFFF!important;
}

:host>>>.ui-menuitem-icon {
    color: #FFFFFF!important;
}

:host>>>.ui-panelmenu .ui-panelmenu-content .ui-menuitem-text {
    color: #003883!important;
}

:host>>>.ui-panelmenu .ui-panelmenu-content .ui-menuitem-icon {
    color: #003883!important;
}

【讨论】：

【解决方案2】：

答案是：

:host {
    ::ng-deep .ui-panelmenu
    {
        width: 250px;
        border: 0px;
    }
    ::ng-deep .ui-panelmenu-header > a {
        border: none!important;
        background-color: transparent!important;
    }
} 
.logo
{
    width: 250px;
}

【讨论】：

【解决方案3】：

在这种情况下使用下一个代码sn-p：

body .ui-panelmenu .ui-panelmenu-header > a {
    border: none!important;
    background-color: transparent!important;
}

在视图的css文件或应用的全局style.css/style.scss中添加代码。

【讨论】：

将此代码添加到 slide-menu.component.scss 后我没有看到任何效果。
这很奇怪，删除css规则的'body'。

【解决方案4】：

在全局 style.css 文件中尝试这种风格 -

body .ui-panelmenu .ui-panelmenu-header > a {
   border: 0px solid black;
   background: red;
}

【讨论】：

我不想在nude_modules中编辑全局style.css文件。
不，我不是在谈论 node_modules 一个
在我的 slide-menu.component.scss 这部分代码不会影响任何东西，这个文件在我调试我的代码时甚至都不可见