Angular Material - 更改单击的 mat-list-option 的颜色

Question

是否有可能更改选中复选框的默认颜色（mat-pseudo-checkbox-checked）：

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

我试过了：

.mat-pseudo-checkbox-checked {
    background-color: #00f;
}

但它没有影响。

Answer 1

只需在<mat-list-option> 中添加class="mat-primary"

<mat-selection-list>
            <mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
              {{shoe}}
            </mat-list-option>

输出：

Answer 2

我不确定，但你可以试试这个

.mat-select-content, .mat-select-panel-done-animating {
     background: mat-color($background, card); 
}

到

.mat-select-content, .mat-select-panel-done-animating {
    background: mat-color($background, card);
    .mat-option {
        color : mat-color($foreground, text);
    }
}

详情也可以查看以下链接 https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss

Answer 3

.mat-pseudo-checkbox{
background-color: red;
}

这对我有用，只需将 background-color 属性应用于复选框类，删除选中的类

Answer 4

使用 Material v 7.3.6 签入，类似于 Sathwik，我成功使用了

.mat-pseudo-checkbox-checked {
    background: #FF0;
}

在末尾添加-checked 可确保复选框仅在主动选中时才着色，否则框始终为该颜色（这可能是您的目标？）。请注意，我必须将此样式包含在最高级别的 styles.css 文件中，而不是单独的组件样式文件中才能成功工作。

如果您有多个选择列表，您可以将样式应用于所需的带有类的列表。此外，您也可以使用动态生成的类对选择列表中的每个复选框选项应用不同的颜色！此处示例：https://stackblitz.com/edit/angular-dtfd6x?file=app/list-selection-example.ts

您可以看到第一个选择列表具有基本样式，而第二个列表（包装在 unique-selection-list 类中）具有不同的样式，每个选项具有唯一的颜色（通过使用 @ 将唯一的类应用于每个选项而生成） 987654327@循环。

// HTML file
<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>

<br>
<hr>

<mat-selection-list #colors>
  <div class="unique-selection-list">
    <div *ngFor="let color of colorsList" [class]="color.className">
      <mat-list-option
        [value]="color.displayName">
        {{ color.displayName }}
      </mat-list-option>
    </div>
  </div>
</mat-selection-list>

// component.ts file constants
  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
  colorsList = [
    {
      hexCode: '#00F',
      displayName: 'Blue',
      className: 'blue-checkbox',
    },
    {
      hexCode: '#F0F',
      displayName: 'Fuchsia',
      className: 'fuchsia-checkbox',
    },
    {
      hexCode: '#0F0',
      displayName: 'Green',
      className: 'green-checkbox',
    },
  ];
}

// styles.css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

.unique-selection-list .blue-checkbox .mat-pseudo-checkbox-checked {
  background: #00F !important;
}

.unique-selection-list .fuchsia-checkbox .mat-pseudo-checkbox-checked {
  background: #F0F !important;
}

.unique-selection-list .green-checkbox .mat-pseudo-checkbox-checked {
  background: #0F0 !important;
}

Answer 5

SRC/STYLES.SCSS

.mat-list-option {
  .mat-list-item-content {
    padding: 2px !important;
    .mat-list-text {
      padding: 2px !important;
    }
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: darkorange;
    }
  }
}

如果你有其他组，你可以这样做

HTML

<mat-selection-list ...>
    <mat-list-option formfiltros-operaciones ...>
        {{operacion.nombre}}
    </mat-list-option>
</mat-selection-list>

<mat-selection-list ...>
    <mat-list-option formfiltros-inmuebles ...> 
        {{inmueble.nombre}}
    </mat-list-option>
</mat-selection-list>

<mat-selection-list ...>
    <mat-list-option formfiltros-localidades ...> 
        {{localidad.nombre}}
    </mat-list-option>
</mat-selection-list>

SRC/STYLES.SCSS

修复填充

.mat-list-option {
  .mat-list-item-content {
    padding: 2px !important;
      .mat-list-text {
      padding: 2px !important;
    }
  }
}

将伪检查颜色应用于“formfiltros-operaciones”组

.mat-list-option[formfiltros-operaciones] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: darkorange;
    }
  }
}

为“formfiltros-inmuebles”组中的伪检查应用颜色

.mat-list-option[formfiltros-inmuebles] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: green;
    }
  }
}

为“formfiltros-localidades”组中的伪检查应用颜色

.mat-list-option[formfiltros-localidades] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: blue;
    }
  }
}

it looks like this