项目场景:
提示:这里简述项目相关背景:
例如:对于element组件的el-uipload组件样式的修改以及其它组件样式修改问题
问题描述
提示:这里描述项目中遇到的问题:
例如: 在局部的style修改组件样式一直不能生效,但是在全局app.vue或者index.html里面就可以生效。
APP 中接收数据代码:
原因分析:
提示:应该是没有监听到
例如:起初我以为是引入的css没有生效,后来我自己写html后在css里面修改样式是成功的,也就是说只是单纯的ele组件没有监听到,那就容易解决了,直接使用深度监听选择器。
vue是通过属性选择器给需要添加的元素加上样式。
scoped作用:只对当前的组件有用(样式)
解决方案:
使用深度监听选择器,可以实现样式传透
例如:
原生CSS: >>>
less: /deep/
scss: ::v-deep
/* css 去除upload组件过渡效果 */
>>>.el-upload-list__item {
transition: none !important;
}
>>> .el-table .cell {
line-height: 1.5;
overflow-y: auto;
max-height: 60px;
}
最后。记得加上scoped属性
以免样式冲突
还有,修改样式写css的时候记得看清楚页面中是否有你selector以及看样式是否带有[data-xxx]前缀