html - 使用 'ngx-pagination' 的默认样式未覆盖 Angular 样式 css

标签 html css angular web-component ngx-pagination

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

enter image description here

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

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

'app.component.css' 中,我上传了主题 css,最后它应该看起来像(参见 documentation):

enter image description here

如有任何帮助,我们将不胜感激。

最佳答案

这是快速工作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,但您会从中得到灵感。

关于html - 使用 'ngx-pagination' 的默认样式未覆盖 Angular 样式 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57450597/

相关文章:

javascript - 在 textarea 中创建自动分页符(redactor)

css - 我可以使用 Bootstrap 组合这样的输入组件吗?

html - td 内 100% 宽度的文本输入在 td 外扩展/继续

angular - 在页面之间导航时未调用 ngAfterViewInit

javascript - 在没有 JQuery 的情况下使用响应式图像映射

html - 最后一个 div 和最后一列的边距

javascript - 不同模板Angular4中的多个路由器导出

Angular:无法读取未定义的属性但仍显示数据

html - CSS 显示 : block doesnt work

html - 如何更改 Twitter Bootstrap 3 垂直变化悬停颜色?