V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Newyorkcity
V2EX  ›  前端开发

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

  •  
  •   Newyorkcity · 121 天前 · 832 次点击
    这是一个创建于 121 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 组件的最终显示效果。

    请问这有什么解决办法吗?
    8 条回复    2022-01-16 13:44:30 +08:00
    Moeyua
        1
    Moeyua  
       121 天前 via iPhone   ❤️ 1
    大概可以尝试使用 /deep/ 直接修改?
    zhy0216
        2
    zhy0216  
       121 天前
    太长没看完
    css module
    :local 好像能解决
    zhy0216
        3
    zhy0216  
       121 天前   ❤️ 1
    :local .urClsName :global .selector-cls-name
    Newyorkcity
        4
    Newyorkcity  
    OP
       121 天前
    @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
        5
    dcsuibian  
       121 天前
    @Newyorkcity angular ?搜一下对应的深度选择器语法吧
    dcsuibian
        6
    dcsuibian  
       121 天前   ❤️ 1
    @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
        7
    IvanLi127  
       121 天前   ❤️ 1
    anc95
        8
    anc95  
       120 天前
    > 但同时,我引用的 UI 库提供的 Select 组件,虽然提供了用户可以加一些 class name 到它的 class 属性的功能。但其显示在页面上的时候,对应的元素不知道为什么并没有被加上 foobar 的 component-id

    听这么描述是个 bug 么,建议可以去看源码,确实有问题 就提 PR
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2978 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 11:21 · PVG 19:21 · LAX 04:21 · JFK 07:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.