vue父组件改变子组件样式

261 阅读1分钟
<!--文件名helloWorld-->
<template>
	<view class="title">
		<text>子组件</text>
	</view>
</template>
<style scoped lang="less">
    .title{
        color:blue;
        }
<style>

less或sass无法正确解析'>>>',可以使用/deep/。

<template>
	<view class="content">
		<text>父组件</text>
		<helloWorld></helloWorld>
	</view>
</template>
<style scoped lang="less">
    .content{
       /deep/  .title{
            color:red;
        }
    }
<style>

使用'>>>'的方法:

<template>
	<view class="content">
		<text>父组件</text>
		<helloWorld></helloWorld>
	</view>
</template>
<style scoped>
    .content >>> .title{
       color:red;
    }
<style>