本文介绍了在uniapp中如何处理CSS样式的问题。首先，App.vue的全局样式可以覆盖子组件和父组件的样式，即使使用了scoped。其次，子组件设置scoped后，其样式将被保护，但App.vue的样式仍能覆盖。为了从父组件穿透并覆盖子组件的样式，可以使用>>>或/deep/选择器。文章通过示例展示了这些用法。
1.App.vue(样式层级高)定义样式就可以覆盖子组件或者父组件，无论有没有设置scoped关键字
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
/*每个页面公共css */
.title{
color: #333333 !important;
}
2.子组件设置scoped
子组件设置scoped会增加私有后缀，为了保证它的唯一性不会父组件导入的css覆盖掉，但App.vue导入的css会覆盖掉它(特别注意)
点击hover效果
export default {
data() {
return {
msg: 'hello,onB'
};
},
methods: {
},
mounted() {
}
}
.title {
color: #F0AD4E;
}
3.父组
最低0.47元/天 解锁文章
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
