Question

我试图从角度材质选择组件中移除箭头。要做到这一点，我有一个自定义CSS文件，我说display：none。这是代码： https://stackblitz.com/edit/angular2-remove-select-arrow

但由于我的CSS是自定义的，我看到没有为箭头div生成唯一标识符，因此不会应用CSS。

请告诉我，实现这一目标的最佳途径是什么？

感谢您的帮助。麦克

Answer 1

在您的案例中使用::ng-deep，但请注意，这个已被弃用现在你的css规则变成这样了：::ng-deep .staffing-cell .mat-select-arrow-wrapper

弃用信息：https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

现在，对于“适当”的方式，您需要利用材料主题来查找文档：https://material.angular.io/guide/theming

Answer 2

当您在组件的CSS文件中声明样式时，会自动添加自定义属性，因此CSS不会应用于当前组件之外。但是，如果要将CSS应用于其他组件（在本例中为mat-select），则会导致问题。

有两种方法可以解决这个问题

在组件

中将encapsulation设置为none

@Component({
    selector: 'select-form-example',
    templateUrl: 'select-form-example.html',
    styleUrls: ['select-form-example.css'],
    encapsulation: ViewEncapsulation.None,
})
export class SelectFormExample {

}

在style.css文件中添加自定义样式，而不是组件的CSS文件 select-form-example.css

我已在第一步更新了stackblitz

Angular 2没有为选择箭头div生成唯一的组件标识符

2 个答案: