Как переопределить основные стили?

Question

Мне нужно использовать PrimeNG в моем проекте.Я хочу использовать стиль Панель меню .

Мне нужно изменить цвет границы и фон.

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>

У меня есть это:

Но хочется этого:

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

Answer 2

В этом случае используйте следующий фрагмент кода:

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

Добавьте код в CSS-файл представления или в глобальный style.css / style.scss приложения.

Answer 3

Ответ:

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

Answer 4

Попробуйте этот стиль в глобальном файле style.css -

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