CODEWITHSUNDEEP
htmlangularprimeng
codeDigger
codeDigger

Reputation: 17

How to overwrite PrimeNG's <p-accordion> tag default styles

Below is a snippet of my html-code. I am trying to display a tab with label-header as Users, but the accordion tag always displays it underlined.

<div class="ui-g">
  <p-accordion id="tabsHeader">
      <p-accordionTab>
            <p-header>
                <span>Users</span>
            </p-header>
      </p-accordionTab>
  </p-accordion>
</div>

I have tried putting text-decoration attribute setting to none in the corresponding css file but this isn't helping, and always underlined headers are displayed.

  #tabsHeader{
     text-decoration : none; 
  }

Need some assistance on how to change the default style (in this case Underlined text). Thanks.

Upvotes: 1

Views: 5728

Answers (2)

Prasanna venkatesh
Prasanna venkatesh

Reputation: 21

Guys do you want to over write the CSS property of NG-PRIME plugins.

step 1 :
Add in "encapsulation: ViewEncapsulation.None" in respective component and import the 

`ViewEncapsulation in @angular/core.`

step2 : in Style.css

    .ui-accordion .ui-accordion-header a {
      display: block;
      padding: .5em;
    }

step 3 : in respective component css file

    .ui-accordion .ui-accordion-header a {
        display: block;
        padding: .5em;
        text-decoration-line: none !important;
    }

Upvotes: 2

ihist
ihist

Reputation: 106

I am changing any Primeng components' style by using

:host /deep/


You can remove the underline like this.

component.scss

:host /deep/ .ui-accordion .ui-accordion-header:hover a{
  text-decoration: none ;
}

Upvotes: 1

Related Questions