vue3.x 移除 scoped 了么？

V2EX = way to explore

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

现在注册

已注册用户请登录

› Vue.js

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

请问 vue3.x 里面移除 scoped 样式作用域了么？那以后样式作用域怎么办？

scoped

样式

请问

13 条回复 • 2023-03-15 17:53:55 +08:00

shakukansp

2023-03-15 15:44:53 +08:00

没移除

charlie21

2023-03-15 15:45:50 +08:00

没有，但有变化参考
https://blog.csdn.net/weixin_44869002/article/details/116132160

shakukansp

2023-03-15 15:51:19 +08:00

@charlie21 这个也老了……
现在是 :deep()

qq309187341

2023-03-15 15:52:53 +08:00

@charlie21 我的新项目使用 vue3 然后里面的组件库使用 naive UI 。但是，我修改一个组件的样式，却没有效果，class 挂载了，但是样式没有。我发现是 scoped 的问题。

qq309187341

2023-03-15 15:53:42 +08:00

@shakukansp 几种我都试过了，都没有起效果。。。

shakukansp

2023-03-15 15:55:05 +08:00

@qq309187341

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

没问题，我项目里就这么写的

qq309187341

2023-03-15 15:57:44 +08:00

@shakukansp 请问如果组件上挂上自己定义的一个 class ，然后再这样使用呢？

yukirus

2023-03-15 15:58:50 +08:00

!important 试试？
虽然这东西问题很多但还挺有效果

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

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

2023-03-15 16:02:00 +08:00

@qq309187341
lang="postcss" ?

qq309187341

2023-03-15 16:28:55 +08:00

@shakukansp 找到问题了。好想无法给 n-modal 设置 class 。我给其他 n-button 设置了之后也是有效果的

shakukansp

2023-03-15 17:53:55 +08:00

@qq309187341
modal 类的东西一般不会给你把 $attrs 绑根元素上，得看下源码到底怎么设置的