html - 如何覆盖primeng样式？

Question

我需要在我的项目中使用 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>

我有这个：

但是想要这个：

标签： htmlcssangularstylesprimeng

Answer 1

答案是：

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