Как переопределить стили primeng?

#html #css #angular #styles #primeng

#HTML #css #angular #стили #primeng

Вопрос:

Мне нужно использовать 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>

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

Но хочу этого:

Ответ №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;
}

Ответ №2:

У меня это работает:

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

Ответ №3:

Попробуйте этот стиль в файле global style.css —

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

1. Я не хочу редактировать глобальный файл style.css в nude_modules.

2. НЕТ, я говорю не о node_modules one

3. В моем слайд-меню.component.scss эта часть кода ни на что не влияет, этот файл даже не виден, когда я отлаживаю свой код

Ответ №4:

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

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

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

Ответ №5:

вы можете переопределить это в глобальной таблице стилей, т.Е. style.scss обернув элементы пользовательским классом, это обеспечит большую специфичность

 .your-class {
  .ui-panelmenu {
    .ui-panelmenu-heade {
      padding: 0;
    }
  }
}