简单粗暴修改vant组件nav-bar的title(标题的字体颜色)

最近我有人问我关于vant组件的nav-bar的标题颜色需要改但是不会，我去网上找了一下，发现都很复杂

然后我发现通过深度选择器可以修改nav-bar的标题的字体颜色

代码：

<template>
	<view>
		<demo-block title="基础用法" class="reset">
			<van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @clickLeft="onClickLeft" @clickRight="onClickRight" id="reset"/>
		</demo-block>

		<demo-block title="高级用法">
			<van-nav-bar title="标题" left-text="返回" left-arrow>
				<van-icon name="search" slot="right" custom-class="icon" />
			</van-nav-bar>
		</demo-block>

	</view>
</template>

<script>
	import Page from '../../common/page';

	export default {
		data() {
			return {

			}
		},
		onLoad() {},
		methods: {
			onClickLeft() {
				console.log("11");//TODO 进不来
				uni.showToast({
					title: '点击返回',
					icon: 'none'
				});
			},

			onClickRight() {
				uni.showToast({
					title: '点击按钮',
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.icon {
		color: #1989fa;
	}
		
	
	#reset /deep/ .van-ellipsis{
		color: red !important;
	}
</style>

效果：

解释： 给组件定义个id，再通过这个深度选择器获取title的标签的类名，修改它的颜色即可.