vue3.x 移除 scoped 了么？

› Vue.js

This topic created in 1180 days ago, the information mentioned may be changed or developed.

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

scoped

样式

请问

13 replies • 2023-03-15 17:53:55 +08:00

shakukansp

Mar 15, 2023

没移除

charlie21

Mar 15, 2023

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

shakukansp

Mar 15, 2023

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

qq309187341

Mar 15, 2023

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

qq309187341

Mar 15, 2023

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

shakukansp

Mar 15, 2023

@qq309187341

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

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

qq309187341

Mar 15, 2023

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

yukirus

Mar 15, 2023

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

shakukansp

Mar 15, 2023

@qq309187341

.menu-tab.n-tabs :deep(.n-tabs-nav.n-tabs-nav--card-type .n-tabs-pad)

qq309187341

Mar 15, 2023

@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

Mar 15, 2023

@qq309187341
lang="postcss" ?

qq309187341

Mar 15, 2023

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

shakukansp

Mar 15, 2023

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