<style scoped> 中的scoped属性,主要影响着父子组件的样式。
我自己在做项目的时候,被这个属性坑了一把。我在自己的组件中引入了ElementUi的组件,当我想去修改ElementUI的组件默认样式时发现无效:
<template>
<div style="margin: auto;width: 50%">
<el-input></el-input> // .el-input__inner被包裹在该组件中
<input class="el-input__inner"></input>
</div>
</template>
<style scoped>
.el-input__inner{
background-color: red!important;
}
</style>
就是因为scoped,导致style只能作用于本组件中的元素,无法修改子组件内的该样式。
总结:在组件中使用scoped会导致style中只能修改该组件中显式出现的样式,父组件也无法修改该组件的样式,但要注意的是,即使加了scoped,父组件如果设置important也是可以修改的。
Scoped穿透
如果我希望在一个组件中加上scoped属性,避免我在该组件中写的样式无意中覆盖掉别的组件的样式,但同时又想修改一些引入的第三方组件默认样式,那可以使用Scoped穿透。我使用的是scss
1. 引入npm install node-sass --save-dev 和 npm install sass-loader --save-dev ,若安装完毕后启动项目报错可能是sass-loader的版本过高,改为7.3.1即可
2. 使用/deep/ 完成穿透
<template>
<div class="blank">
<el-input></el-input> <!--.el-input__inner被包裹在该组件中!-->
<input class="el-input__inner"></input>
</div>
</template>
<style scoped>
/deep/ .el-input__inner{
background-color: red;
}
<style>
另外也可以用 >>>完成穿透
<template>
<div class="blank">
<el-input></el-input> <!--.el-input__inner被包裹在该组件中!-->
<input class="el-input__inner"></input>
</div>
</template>
<style scoped>
>>> .el-input__inner{
background-color: red;
}
<style>
其他方式
在使用scoped的情况下还有另外几种方式能修改子组件的样式:
- 另外写一个不带scoped的style。
- 写一个全局的css文件修改样式,在main中全局引用。