vue 中 scoped 的坑
1. 一般用vue框架,在组件中为了不相互影响各自的样式,都会在 style 标签上加上 scoped , scoped 的作用是限制了样式的作用范围,只在本页有效。 2. 要更改组件的样式,比如element, iview 组件, 就必须去掉scoped 。然后找到要更改的组件的元素的类名。 如要更改饿了么组件中的按钮的样式 :&...
·
一般用vue框架,在组件中为了不相互影响各自的样式,都会在 style 标签上加上 scoped , scoped 的作用是限制了样式的作用范围,只在本页有效。
###### 最好的办法就是在要更改的样式名字前添加 ```/deep/ ```
去掉scoped 这个属性,用来解决更改组件内的样式并不是很好的解决方法,我后来又看到一个方法,在要更改的样式前边添加 /deep/ 就可以了,比如要更改ant-design-vue 中的输入框的背景颜色,elementUI组件同理。
```
/deep/ input.ant-input { background: #F1F2F6; }
```
其他解决办法:
- 要更改组件的样式,比如element, iview 组件 , 就必须去掉scoped 。然后找到要更改的组件的元素的类名。
如要更改饿了么组件中的按钮的样式 :
<style lang="scss">
.el-checkbox-button, .el-checkbox-button__inner{
......
}
</style>
- 要想要不会全局污染, 那么在每个自己的组件下的div添加一个className或者id 。在要更改的饿了么组件的类名前 ,添加自己组件的类名或者id名即可。比如一个组件的类名为 .filemaplist : <template>
<div class="filemaplist" @mouseup='Release'>
</div>
</template>
.......
<style lang="scss">
.filemaplist .el-checkbox-button, .el-checkbox-button__inner{
......
}
</style>
更多推荐
已为社区贡献18条内容
所有评论(0)