angular - CSS材质角
问题描述
我对 Material Angular 的 css 有疑问。我想使用一个选择组件,但该组件非常高,我不知道如何修改它。
<div class="searchBar">
<mat-form-field appearance="standard">
<mat-label>Agences</mat-label>
<mat-select [formControl]="filterBar" multiple>
<mat-select-trigger>
{{filterBar.value ? filterBar.value[0] : ''}}
<span *ngIf="filterBar.value?.length > 1" class="additional-selection">
(+{{filterBar.value.length - 1}} {{filterBar.value?.length === 2 ? 'autre' : 'autres'}})
</span>
</mat-select-trigger>
<mat-option *ngFor="let agence of agenceList" [value]="agence">{{agence}}</mat-option>
</mat-select>
</mat-form-field>
</div>
当我在 devTools 中选择占用空间最多的组件时,就是这个
<mat-form-field _ngcontent-c4 appearance="standard" class="mat-form-field ng-tns-c10-0 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-standard mat-form-field-can-float mat-form-field-has-label ng-pristine ng-valid ng-touched mat-form-field-hide-placeholder" ng-reflect-appearance="standard">
解决方案
如果使用 scss,则可以选择具有上述规则的元素。
:host ::ng-deep .mat-form-field {}
在那里你可以添加你不能改变的属性,
推荐阅读
- mysql - 计算每个用户mysql的不同日期
- typescript - 仅使用 prisma2 和 nexus 检索所有者数据的可能性
- scala - 在 slick 3.0 中更新多对多连接表
- sql - Laravel Eloquent Join 使用另一个表
- eclipse - 如何将 javafx 安装到 Eclipse
- flutter - 下拉按钮不会改变
- machine-learning - 错误不会超出我的神经网络中的特定限制
- php - 从刀片获取值到模型函数 Laravel
- java - Amazon PA API 5.0 迁移 - 找不到 Maven 开发工具包依赖项(公共存储库)
- azure-data-explorer - 防止分区列出现在导出的数据中