我的组件里用了多个某个 UI 库提供的 Select 组件，想要对特定的几个 Select 组件的样式修改，且定义的样式必须写在 scope 在这个组件的 css 文件里，有什么办法吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1443 天前的主题，其中的信息可能已经有所发展或是发生改变。

scope 在这个组件（指我正在写的组件，后文叫它 foobar ）的 css 文件的选择器，在实际生效时都会被带上一个 [component-id] 以达成影响只限制在此 foobar 中的效果，避免只是想加给 foobar 的样式无意之间影响到了其它协作的组件（元素）的样式。

这个好处我不想放弃。

但同时，我引用的 UI 库提供的 Select 组件，虽然提供了用户可以加一些 class name 到它的 class 属性的功能。但其显示在页面上的时候，对应的元素不知道为什么并没有被加上 foobar 的 component-id 。

这也就导致，即便我给我想要修改的那一两个 Select 组件添加了类名，比如，加 specific 上去了。但我在 foobar 的 css 里写 .specific 的样式，也根本作用不到（那一两个 Select 组件最终显示在页面上的元素里并没有 foobar 的 component-id ）那几个 select 组件的最终显示效果。

请问这有什么解决办法吗？

组件

foobar

select

CSS

8 条回复 2022-01-16 13:44:30 +08:00

Moeyua

2022-01-15 08:53:02 +08:00 via iPhone

大概可以尝试使用 /deep/ 直接修改？

zhy0216

2022-01-15 08:54:58 +08:00

太长没看完
css module
:local 好像能解决

zhy0216

2022-01-15 08:57:20 +08:00

:local .urClsName :global .selector-cls-name

Newyorkcity

2022-01-15 09:33:20 +08:00

@zhy0216

是这样子写吗？
:local .specific :global .mat-select-panel {
width: 600px;
}

但最终生成的玩意儿是
[_ngcontent-fqf-c83]:local .specific[_ngcontent-fqf-c83] [_ngcontent-fqf-c83]:global .mat-select-panel[_ngcontent-fqf-c83] {
width: 600px;
}

并没有生效（这里 foobar 的 id 是_ngcontent-fqf-c83 ）

@Moeyua 可以再详细一点吗？

dcsuibian

2022-01-15 12:53:39 +08:00

@Newyorkcity angular ？搜一下对应的深度选择器语法吧

dcsuibian

2022-01-15 13:11:43 +08:00

@Newyorkcity 不了解 angular ，但看起来是用了跟 vue 一样的属性选择器实现的，我就按 vue 的猜了。

你写的一个组件，有类似 html 的结构和对应的 css 。它只会给你写的 html 里加上_ngcontent-fqf-c83 属性（和你的组件对应），然后给你写的 css 里加上[_ngcontent-fqf-c83]选择器，你引用的 select 组件内部的 html 里并不会有_ngcontent-fqf-c83 这个东西。

所以，你最终生成的 css 选择器应该是.specific[_ngcontent-fqf-c83] .mat-select-panel 这样的，这样既能给当前组件里面的 select 换样式，又不会影响其它地方的 select 。所以主要问题就是要告诉编译器.mat-select-panel 是子组件里面的，不需要加[_ngcontent-fqf-c83]

IvanLi127

2022-01-15 16:22:53 +08:00

是 Angular 吗？ ::ng-deep 了解一下？ https://angular.cn/guide/component-styles#deprecated-deep--and-ng-deep

anc95

2022-01-16 13:44:30 +08:00

> 但同时，我引用的 UI 库提供的 Select 组件，虽然提供了用户可以加一些 class name 到它的 class 属性的功能。但其显示在页面上的时候，对应的元素不知道为什么并没有被加上 foobar 的 component-id

听这么描述是个 bug 么，建议可以去看源码，确实有问题就提 PR