【问题标题】:Angular style css not overwritten by default style using 'ngx-pagination'使用'ngx-pagination'的默认样式不会覆盖角度样式css
【发布时间】:2019-12-18 09:47:33
【问题描述】:

我目前正在使用 Michael Bromley 的 'ngx-pagination' 模块。该模块工作正常,但它似乎是唯一不使用现有主题 css 的分页模块。现在看起来像:

阅读他的explanation,似乎应该很容易通过添加/deep/来覆盖css。好吧,它不起作用...有人说它是'弃用',所以我尝试添加!important,但这似乎不起作用也是。

见 -> https://stackblitz.com/edit/angular-p3swdg

'app.component.css' 中,我已经上传了主题 css,最后它应该是这样的(参见 documentation):

任何帮助将不胜感激。

【问题讨论】:

    标签: html css angular web-component ngx-pagination


    【解决方案1】:

    这里是快速工作stackblitz solution

    .pagination /deep/ .ngx-pagination .current {
        background: red;
      }
    
      .pagination /deep/ .ngx-pagination li {
        border: 1px solid #CCCC;
        margin-right: 0px;
      }
    
       .pagination /deep/ .ngx-pagination a::after{
         display: none;
       }
    
       .pagination /deep/ .ngx-pagination li::before{
         display: none;
       }
    
        .pagination /deep/ .ngx-pagination li::after{
         display: none;
       }
    
        .pagination /deep/ .ngx-pagination a::before{
         display: none;
       }
    

    使用 /deep 。您可以更好地完善 css,但您会从中得到灵感。

    【讨论】:

    • 感谢您的示例。它确实有效,但我真正想要的是使用我的主题 css。所以,我已经像你一样应用了 /deep/ ,但它仍然不起作用。见->stackblitz.com/edit/angular-g9qw9g
    • @Jamie:我尝试在最后一个样式块中添加.pagination /deep/ .ngx-pagination .current,它起作用了。 Here 是演示代码。您需要选择确切的课程。
    • @Shashank_Vivek:谢谢。今晚我会尝试让它与我当前的主题 css 完全一样。感谢您的帮助:)
    猜你喜欢
    • 2018-09-22
    • 2023-03-18
    • 2019-12-08
    • 2021-01-23
    • 1970-01-01
    • 1970-01-01
    • 2023-03-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多