vue3全局组件中使用全局样式失效bug

正常代码如下

<template>
  <div class="client-1000 flex-column">
    <HeaderSearch />
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.client-1000 {
  height: 100%;
  background: #fff;
}
</style>

HeaderSearch 组件

<template>
  <el-row>
    <el-col :span="10" class="flex-acenter">
      <div class="flex-acenter">
        <span>title</span>
        <el-input />
      </div>
    </el-col>
  </el-row>
</template>

<script>
/* 组件名字 */
export default {
  name: 'HeaderSearchInfo'
};
</script>

<script setup>
</script>

<style lang="scss" scoped>
</style>

解决方案：

1. 在你的组件里面写一个样式，任何样式都行，因为不写没触发编译（这个是最优解）
2. 父级样式去掉scope（别这样搞）

<template>
  <el-row>
    <el-col :span="10" class="flex-acenter">
      <div class="flex-acenter">
        <span>title</span>
        <el-input />
      </div>
    </el-col>
  </el-row>
</template>

<script>
/* 组件名字 */
export default {
  name: 'HeaderSearchInfo'
};
</script>

<script setup>
</script>

<style lang="scss" scoped>
/* 重点就是这里 */
.xxxxxxxxxxxxxxxxxxx{
}
</style>

最后

以上就是爱笑菠萝为你收集整理的vue3全局组件中使用全局样式失效bug的全部内容，希望文章能够帮你解决vue3全局组件中使用全局样式失效bug所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。