Css Angular 2没有为select arrow div生成唯一的组件标识符

我正在尝试从角材质选择组件中删除箭头。 为此，我有一个自定义CSS文件，其中我说display:none。 代码如下：

但是由于我的CSS是为这个组件定制的，所以我看到没有为arrow div生成唯一的标识符，所以没有应用CSS

你能告诉我实现这一目标的最佳方法是什么吗

谢谢你的帮助。

---

Mike

在您的案例中使用

：ng deep

，但请注意，这一个已经被弃用了。
现在您的css规则变成这样：

：：ng deep.staffing cell.mat select arrow wrapper

弃用信息：

---

现在，对于“适当”的方式，您需要利用材料主题，您可以在他们的文档中查找材料主题：

在您的情况下使用

：：ng deep

，但请注意，这一种已经不推荐了。
现在您的css规则变成这样：

：：ng deep.staffing cell.mat select arrow wrapper

弃用信息：

---

现在，对于“适当”的方式，您需要利用材料主题化，您可以在其文档中查找材料主题：

当您在组件的CSS文件中声明样式时，自定义属性会自动添加到该文件中，以便CSS不会应用于当前组件之外。但是，当您想将CSS应用于其他组件时，就会出现问题，在本例中，

mat select

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

在组件中将

封装设置为无

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

}

在

style.css

文件中添加自定义样式，而不是组件的css文件

选择表单示例.css

---

我已经用第一步更新了，当您在组件的CSS文件中声明样式时，自定义属性会自动添加到该文件中，以便CSS不会应用于当前组件之外。但是，当您想将CSS应用于其他组件时，就会出现问题，在本例中，

mat select

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

在组件中将

封装设置为无

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

}

在

style.css

文件中添加自定义样式，而不是组件的css文件

选择表单示例.css

---

我已更新了第一步，谢谢。这样做将适用于我的所有其他组件，但现在让我们保持简单。稍后我将查看是否希望/需要使用此选择创建自定义组件，而不使用箭头。如果添加类似于我在html文件中的stackblitz演示中对

mat select

元素所做的

custom select

的类，它不会应用于所有组件，因为只有在您想隐藏箭头的情况下才会添加该类。谢谢。这样做将适用于我的所有其他组件，但现在让我们保持简单。稍后我将查看是否希望/需要从此选择中创建自定义组件，而不使用箭头。如果您添加类似于我在html文件中的stackblitz演示中对

mat select

元素所做的

custom select

的类，那么它将不会应用于所有组件，因为您只会在希望隐藏箭头的情况下添加该类。