vue3.x 移除 scoped 了么?

2023-03-15 15:41:01 +08:00
 qq309187341
请问 vue3.x 里面移除 scoped 样式作用域了么?那以后样式作用域怎么办?
2135 次点击
所在节点    Vue.js
13 条回复
shakukansp
2023-03-15 15:44:53 +08:00
没移除
charlie21
2023-03-15 15:45:50 +08:00
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 绑根元素上,得看下源码到底怎么设置的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/924227

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX