Question

下面是我的html代码的片段。我正在尝试将带有标题标题的标签显示为Users，但accordion标记始终显示带下划线的标签。

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

我已尝试将text-decoration属性设置添加到相应的css文件中的none，但这并非有帮助，并且始终显示带下划线的标题。

  #tabsHeader{
     text-decoration : none; 
  }

如何更改默认样式（在本例中为带下划线的文本）需要一些帮助。感谢。

Answer 1

我正在改变任何Primeng组件＆＃39;使用

的风格

：host / deep /

你可以像这样删除下划线。

<强> component.scss

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

Answer 2

您是否想重写NG-PRIME插件的CSS属性。

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

如何覆盖PrimeNG的<p-accordion>标签默认样式

2 个答案: