uniapp依赖版本 3.0.0-4020920240930001
项目是vue3+ts+Wot UI
1.如下代码，发现v-show没生效，试着用class样式控制也没生效，换了自定义组件也不生效，用deep也没用，去小程序中看样式表都没生效，然后试了deep也不行。
// pageA.vue
<!-- ui库组件 -->
<wd-button v-show="false">测试</wd-button>
<wd-button class="d-n">测试</wd-button>
<!-- 自定义组件 -->
<custom>测试</custom>2.搜索了下相关的问题可能和styleIsolation配置有关，试过以下方案都不行
方案一
// pageA.vue
<script setup lang="ts">
...
defineOptions({
options: {
styleIsolation: 'shared',
}
})
...
</script>方案二
// pageA.vue
<script lang="ts">
export default {
options: {
styleIsolation: 'shared'
}
}
</script>
<script setup lang="ts">
...
</script>
1 个回复
最佳回复
isixe
组件中增加
然后在 :deep() 中使用 !important 覆盖样式，可以在微信开发者工具中查看覆盖样式是否出现
在wot-ui组件样式中，wot内部组件class优先于自定义的custom-class，例如 .wot-input，如果 custom-class 不生效，应该使用 :deep(.wot-input){} 进行精准覆盖
引用自：为什么在组件中无法覆盖组件库样式？