如何更改角度组件的活动材料列表材料列表项颜色？

Posted 2023-03-13

【中文标题】如何更改角度组件的活动材料列表材料列表项颜色？

【英文标题】：How to change active material list material list item color of angular components?

【发布时间】：2018-08-06 22:24:44

【问题描述】：

我正在尝试使用背景颜色material-list 显示material-list-items 和$mat-amber-A400，但是在单击任何material-list-item 时，它会将颜色更改为light-grey。我如何申请background-color 到$mat-amber-A400颜色，即使点击项目。

app_component.html

<material-list class="name-card" *ngFor="let item of names">
            <material-list-item class="names">
                <span class="first">item.first</span>
                <span class="second">item.second</span>
                <material-chips><material-chip class="my-theme" [removable]="false"></material-chip>
                    <material-chip class="my-theme" [removable]="false"></material-chip>
                </material-chips>
            </material-list-item>
        </material-list>

app_component.scss

material-list material-list-item 
  display: flex;
  flex-direction: column;


material-list material-list-item:hover, material-list-item:active, material-list-item:visited 
  background-color: $mat-amber-A400;


.name-card 
  background-color: $mat-amber-A400;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  margin: 16px;
  display: inline-flex;

【问题讨论】：

尝试在选择器前加上:host ::ng-deep

:host ::ng-deep material-list material-list-item display: flex; flex-direction: column; background-color: $mat-amber-A400; :host ::ng-deep material-list material-list-item:hover, material-list-item:active, material-list-item:visited background-color: $mat-amber-A400; 这些代码都不起作用

通过删除 material-list 没有任何效果，包括 material-list 悬停时的代码效果，但单击项目时 background-color 保持不变 light-grey

对不起，请忽略我的cmets，我完全走错了方向。

所以，帮我找一个合适的

【参考方案1】：

material-drawer material-list-item:hover, 
material-list-item:active,
material-list-item:visited 
  background-color: $mat-amber-A400;