1
votes

Comment remplacer les styles primeng?

J'ai besoin d'utiliser PrimeNG dans mon projet. Je veux styliser le Menu du panneau .

Je dois changer la couleur de la bordure et l'arrière-plan .

HTML:

<img class="logo" src="../../../assets/images/MenuLogo.png">
<p-panelMenu [style]="{'border':'none', 'background-color':'none'}" [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;
}

Je veux faire disparaître la bordure et l'arrière-plan à d'abord, si j'utilise votre code comme ceci:

HTTP:

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

J'ai ceci:

Mais je veux ceci:

angular html css primeng styles

0 commentaires

4 Réponses :

0
votes

Essayez ce style dans le fichier global style.css -

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

3 commentaires

Je ne veux pas modifier le fichier global style.css dans nude_modules.

NON, je ne parle pas de node_modules one

Dans mon slide-menu.component.scss cette partie du code n'affecte rien, ce fichier n'est même pas visible lors du débogage de mon code

0
votes

Dans ce cas, utilisez l'extrait de code suivant:

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

Ajoutez le code dans le fichier css de la vue ou dans le global style.css / style.scss de l'application .

2 commentaires

Après avoir ajouté ce code à slide-menu.component.scss, je n'ai vu aucun effet.

C'est étrange, supprimez le «corps» de la règle css.

1
votes

La réponse est:

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

0 commentaires

0
votes

Cela fonctionne pour moi:

HTML:

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

CSS (de la vue):

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

0 commentaires