Vue3如何深度修改vant4 css样式

1、当前页面只用一次某个组件

vue2是

  ::v-deep .vant-button{}

vu3则是

  ::v-deep(.vant-button){}

页面示例

<template>
	<van-button>回到顶部vant-button>
template>
<style lang="scss" scoped>
	::v-deep(.van-button) {
		background-color: orange;
	}
}

style>

2、页面多次使用同个组件，如何修改其中一个，而不改变其他组件原本的样式。

例如下面我们只修改productBox下的button，在它外层包裹一个div，用兄弟选择器就能精准修改。

<template>
	<van-button>回到顶部vant-button>
	<div class="productBox">
		<van-button>立即购买vant-button>
	div>

template>
<style lang="scss" scoped>
.container{
	.productBox{
		::v-deep(.van-button) {
			background-color: orange;
		}
	}
}

style>