如何区分 mat-select 样式和 mat-paginator mat-select 样式？答案

【问题标题】：How to differentiate mat-select style and mat-paginator mat-select styles?如何区分 mat-select 样式和 mat-paginator mat-select 样式？
【发布时间】：2019-12-05 18:47:36
【问题描述】：

我正在创建 angular 7 web app，并使用一个 mat-select 下拉菜单和一个 mat-paginator。现在我要隐藏 mat-select 向下箭头。

Here is the mat-select docs.

//hide down arrow
::ng-deep .mat-select-arrow {
width: 0;
height: 0;
border-left: 0px solid transparent; 
border-right: 0px solid transparent;
border-top: 5px solid;
margin: 0 4px;
}

在 mat-paginator 出现问题后，分页器下拉箭头不会出现。如何区分两个下拉菜单。

我想在 mat-paginator 中使用下拉箭头。

【问题讨论】：

标签： css sass angular-material angular7

【解决方案1】：

您可以添加以下css 定义。

:host ::ng-deep.mat-paginator .mat-select-arrow {
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
}

【讨论】：

谢谢先生，我请求您给我一些关于 UI 设计或任何教程的提示。
虽然我的回答涉及CSS，但我不认为自己是CSS 专家。互联网上有很多很好的网站可以详细解释这个话题。由于 Angular Material 主要使用 CSS flexbox layout，我在 css-tricks.com/snippets/css/a-guide-to-flexbox 的惊人指南中找到了相关问题的大多数解决方案。