CODEWITHSUNDEEP
htmlcssangularstylesprimeng
Yardi
Yardi

Reputation: 463

How to override primeng styles?

I need to use PrimeNG in my project. I want to style Panel Menu.

I need to change border color and background.

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

I want to disappear border and background at first, if I using your code like this:

HTTP:

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

I have this:

But want this:

Upvotes: 1

Views: 11613

Answers (5)

Benny
Benny

Reputation: 1

you can override it in global stylesheet ie style.scss by wrapping the elements with a custom class this will provide more specificity

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

Upvotes: 0

Robert Ostrowicki
Robert Ostrowicki

Reputation: 352

This is working for me:

HTML:

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

CSS (of the view):

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

Upvotes: 1

Yardi
Yardi

Reputation: 463

The answer is:

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

Upvotes: 3

Pablo M.
Pablo M.

Reputation: 492

In this case use the next code snippet:

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

Add the code in the css file of the view or in the global style.css/style.scss of the application.

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86730

Try this style in global style.css file -

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

Upvotes: 0

Related Questions