Angular Material Pagination 选择颜色更改为无？答案

【问题标题】：Angular Material Pagination select color change to none?Angular Material Pagination 选择颜色更改为无？
【发布时间】：2017-10-09 18:32:11
【问题描述】：

所以我有 md-table-pagination 设置（角度材料。但是每次我单击每页所需的行时，所选页面的颜色都会从白色变为黑色。我如何使它保持白色即使在我点击之后？我试着弄乱标签，但它只是改变标签的颜色，而不是点击后的颜色。

 </md-table-container>
      <md-table-pagination md-limit="$ctrl.query.limit" md-limit-options="$ctrl.query.limitOptions"  md-page="$ctrl.query.page" md-total="{{$ctrl.fullDataList.length}}" md-on-paginate="$ctrl.onPaginate" md-page-select></md-table-pagination>
    </md-table-container>

.md-table-pagination {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-flex-wrap: wrap-reverse;
      -ms-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
  box-sizing: border-box;
  padding: 0 24px;
  font-size: 12px;
  color: $font-color;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
.md-table-pagination md-select {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  min-width: 64px;
}
.md-table-pagination md-select:not([disabled]):focus .md-select-value {
  color: rgba(0, 0, 0, 0.54);
}
.md-table-pagination md-select .md-select-value {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.md-table-pagination md-select .md-select-value span.md-select-icon {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin-right: -6px !important;
}
.md-table-pagination md-select .md-select-value span.md-select-icon:after {
  top: initial;
  -webkit-transform: scaleY(0.5) scaleX(1);
          transform: scaleY(0.5) scaleX(1);
}
.md-table-pagination > * {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 56px;
}
.md-table-pagination > .buttons:not(:first-child),
.md-table-pagination > .limit-select:not(:first-child) {
  margin-left: 32px;
}
.md-table-pagination > .buttons {
  margin-right: -16px;
}
.md-table-pagination > .buttons > .md-button.md-icon-button {
  margin: 0;
}
.md-table-pagination > .buttons > .label + .md-button.md-icon-button {
  margin-left: 20px;
}

【问题讨论】：

标签： css angularjs pagination material-design angular-material

【解决方案1】：

.md-table-pagination md-select:not([disabled]):focus .md-select-value {
 color:white;
}

基本上 md-select 我们可以更改为任何颜色。在我的情况下，颜色在选择时默认为黑色，只需更改为白色

【讨论】：

【解决方案2】：

对于我的 Angular 5 上下文，必须更改分页选项以及您已经选择的内容...

::ng-deep mat-option {
  background: COLOR1 !important;
  // color: white !important;
}

::ng-deep mat-option.mat-selected {
  background: COLOR2 !important;
  color: white !important;
}

【讨论】：