正常代码如下
<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>
解决方案:
- 在你的组件里面写一个样式,任何样式都行,因为不写没触发编译(这个是最优解)
- 父级样式去掉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>