V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qq309187341
V2EX  ›  Vue.js

vue3.x 移除 scoped 了么?

  •  
  •   qq309187341 · 2023-03-15 15:41:01 +08:00 · 2155 次点击
    这是一个创建于 648 天前的主题,其中的信息可能已经有所发展或是发生改变。
    请问 vue3.x 里面移除 scoped 样式作用域了么?那以后样式作用域怎么办?
    13 条回复    2023-03-15 17:53:55 +08:00
    shakukansp
        1
    shakukansp  
       2023-03-15 15:44:53 +08:00
    没移除
    charlie21
        2
    charlie21  
       2023-03-15 15:45:50 +08:00
    shakukansp
        3
    shakukansp  
       2023-03-15 15:51:19 +08:00
    @charlie21 这个也老了……
    现在是 :deep()
    qq309187341
        4
    qq309187341  
    OP
       2023-03-15 15:52:53 +08:00
    @charlie21 我的新项目使用 vue3 然后里面的组件库使用 naive UI 。但是,我修改一个组件的样式,却没有效果,class 挂载了,但是样式没有。我发现是 scoped 的问题。
    qq309187341
        5
    qq309187341  
    OP
       2023-03-15 15:53:42 +08:00
    @shakukansp 几种我都试过了,都没有起效果。。。
    shakukansp
        6
    shakukansp  
       2023-03-15 15:55:05 +08:00
    @qq309187341

    <style scoped>
    :deep(.n-upload-trigger) {
    width: 100%;
    text-align: left;
    }
    </style>

    没问题,我项目里就这么写的
    qq309187341
        7
    qq309187341  
    OP
       2023-03-15 15:57:44 +08:00
    @shakukansp 请问如果组件上挂上自己定义的一个 class ,然后再这样使用呢?
    yukirus
        8
    yukirus  
       2023-03-15 15:58:50 +08:00
    !important 试试?
    虽然这东西问题很多但还挺有效果
    shakukansp
        9
    shakukansp  
       2023-03-15 15:59:10 +08:00
    @qq309187341

    .menu-tab.n-tabs :deep(.n-tabs-nav.n-tabs-nav--card-type .n-tabs-pad)
    qq309187341
        10
    qq309187341  
    OP
       2023-03-15 15:59:11 +08:00
    @shakukansp
    <n-modal v-model:show="showModal" class="rowell-menu-modal" :mask-closable="false" title="菜单管理" :show-icon="false"
    preset="card">
    <n-data-table :columns="columns" :data="data" :pagination="pagination" :bordered="false" />
    </n-modal>

    <style scoped>
    :deep(.rowell-menu-modal) {
    @apply w-80vw h-90vh p-0 bg-white rounded-md;
    }
    </style>

    我是这样的,但是没有效果
    shakukansp
        11
    shakukansp  
       2023-03-15 16:02:00 +08:00
    @qq309187341
    lang="postcss" ?
    qq309187341
        12
    qq309187341  
    OP
       2023-03-15 16:28:55 +08:00
    @shakukansp 找到问题了。好想无法给 n-modal 设置 class 。我给其他 n-button 设置了之后也是有效果的
    shakukansp
        13
    shakukansp  
       2023-03-15 17:53:55 +08:00
    @qq309187341
    modal 类的东西一般不会给你把 $attrs 绑根元素上,得看下源码到底怎么设置的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1395 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:52 · PVG 00:52 · LAX 08:52 · JFK 11:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.