Question

我想修改Angular Material Paginator的默认外观。例如，我想将justify-content属性更改为flex-start。

pip install astroid==1.5.3 pylint==1.8.2

我所做的是-我将以下css粘贴到styles.css文件中

.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 56px;
padding: 0 8px;
flex-wrap: wrap-reverse;
width: 100%;}

但是那没有用。我还在组件的css文件中尝试了css。但这也不起作用。那么如何修改CSS？

更新

结果是我必须使用！important才有效！我在避免这种情况，但别无选择。任何更好的解决方案，请让我知道。

Answer 1

您可以使用:: ng-deep更改mat-paginator的样式

:host ::ng-deep.mat-paginator .mat-paginator-container{
  justify-content: flex-start;
}

Answer 2

通过在CSS中添加！important，我没有成功。所以我在app.component.css文件中做到了：

.mat-paginator {
     display: flex;
     justify-content: center;
 }

但是您可能会抱怨说，您可能不想让分页器变得“灵活”。您可以将打孔器放在div标签中，以确保将其显示为块：

在app.component.html中：

  ...
     <div class="container">
         <mat-paginator>
              ......
         </mat-paginator>
     </div>
  ...

PS：添加！important不是一个好主意。

Answer 3

您应将id element 0 1 p0 1 2 p0 2 3 p1 3 4 p2放在类选择器之前：

::ng-deep

如何自定义Angular Material分页器的CSS？

3 个答案: