改变vue组件内部样式

不知道大家有没有遇到过这样的问题，在使用vue组件的时候这个组件你能看的到的dom给他加内联样式，或者加class还是可以改变它的样式的。但是如何修改你看不到的vue组件中的dom的样式呢。
下面就和大家分享一个方法，可以有效的解决这个问题。

<vp-radio-group v-model="radio" size="small" style="width:100%" class="changeNav" @change="change(radio)">
   <vp-radio-button label="一个标签" style="width:50%"></vp-radio-button>
   <vp-radio-button label="两个了标签" style="width:50%"></vp-radio-button>
</vp-radio-group>

首先浏览器打开开发者模式，选中你要添加样式的dom元素，复制他的class名。
然后你需要给你想添加样式的dom元素的父级元素添加class名
最后只需要你添加的父class名 + >>> + 加粗部分你复制的隐藏dom元素名，这样就可以修改他的样式啦，亲测有效。
/* 渗透改变组件内部样式 */
.changeNav >>> .vp-radio-button–small .vp-radio-button__inner {
width: 100%;
}