问题遇到的现象和发生背景
Vue单文件组件样式使用了scoped但字体样式依然影响了子组件。
是不是只有字体相关样式会如此？
问题相关代码，请勿粘贴截图
父组件
<template>
<div class="index">
父组件字体
<nav-menu></nav-menu>
</div>
</template>
<script>
import NavMenu from "./NavMenu/NavMenu";
export default {
name: "index",
components: {
NavMenu
},
}
</script>
<style scoped>
.index {
height: calc(100vh - 2px);
display: flex;
background-color: coral;
font-size: 20px;
color: olive;
text-align: center;
}
</style>
子组件
<template>
<div class="wrapper">
难办
<children></children>
</div>
</template>
<script>
import Children from "./Children";
export default {
name: "NavMenu",
components: {
Children
}
}
</script>
<style scoped>
.wrapper {
height: 200px;
background-color: sienna;
}
</style>
<template>
<div class="children">
子组件这也是olive色。
</div>
</template>
<script>
export default {
name: "Children"
}
</script>
<style scoped>
</style>
运行结果及报错内容
