uniapp - css样式设置scoped
CSS 设置 样式 uniapp scoped
2023-09-11 14:14:36 时间
1.App.vue(样式层级高)定义样式就可以覆盖子组件或者父组件,无论有没有设置scoped关键字
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
.title{
color: #333333 !important;
}
</style>
2.子组件设置scoped
子组件设置scoped会增加私有后缀,为了保证它的唯一性不会父组件导入的css覆盖掉,但App.vue导入的css会覆盖掉它(特别注意)
<template>
<view>
<view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
点击hover效果
</view>
<!-- <button type="primary" @click="onSend">传值给onB组件</button> -->
</view>
</template>
<script>
export default {
data() {
return {
msg: 'hello,onB'
};
},
methods: {
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
.title {
color: #F0AD4E;
}
</style>
3.父组件如何穿透子组件,覆盖它的样式->穿透“>>>和/deep/”
index.vue
<template>
<view class="content">
<onA></onA>
</view>
</template>
<script>
import onA from '@/components/onA.vue';
export default {
data() {
return {
}
},
components:{
onA
},
onLoad() {
},
mounted() {
},
methods: {
}
}
</script>
<style>
>>>.title {
font-size: 36rpx;
color: #007AFF;
}
/deep/.title{
font-size: 36rpx;
color: #f00;
}
</style>
onA.vue
<template>
<view>
<view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
点击hover效果
</view>
<!-- <button type="primary" @click="onSend">传值给onB组件</button> -->
</view>
</template>
<script>
export default {
data() {
return {
msg: 'hello,onB'
};
},
methods: {
},
mounted() {
}
}
</script>
<style lang="scss">
.title {
color: #F0AD4E;
}
</style>
相关文章
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- 【Css】css中class之间>(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解(转载,笔记用)
- css 文本省略号设置
- CSS: animation
- React antd嵌入百度编辑器(css加载不到等问题,'offsetWidth' of null)
- CSS 设置背景图片
- CSS 设置页面缩放
- CSS(字体相关知识以及css三种样式表使用方法)
- CSS 浮动【快速掌握知识点】
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——2.4 网页的主体标记body
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- 用css解决Unigui在IE系列浏览器中字体变小的问题(设置UniServeModule的customcss属性)
- css:文本两端对齐
- 通过!important设置css样式优先级
- css文字颜色渐变
- css 利用animation和transform 设置鸭子表
- CSS学习知识整理(四)Css 盒子模型
- 前端特效: 使用CSS生成的闪光照相机效果
- css+html+js实现多级下拉和弹出菜单
- CSS 加粗(css font-weight)
- CSS 加粗(css font-weight)