vue开发web组件引用第三方组件，如何让样式生效？

Question

我用vue3开发web组件，假设单文件组件为A，A引用layui-vue项目的一个按钮组件，我在A组件的style标签写了scoped，希望所有样式局部生效，我该如何引用layui-vue的按钮组件的样式啊？

Answer 1

1、去掉 scoped 并手动限制作用范围
如果你只想在当前组件中生效，可以不使用 scoped，然后通过更高的选择器优先级或者添加 class 来限制样式的作用范围：

<template>
  <div class="my-component">
    <l-button></l-button> <!-- layui-vue 按钮组件 -->
  </div>
</template>

<style>
.my-component l-button {
  /* 在这里可以写你对 layui-vue 按钮的样式 */
}
</style>

2、 使用 ::v-deep（深度作用选择器）
如果你需要使用 scoped 样式并且想要修改 layui-vue 组件的样式，可以通过 ::v-deep 进行样式穿透