uniapp - css样式设置scoped

 

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>