Ant Design Vue地址：https://www.antdv.com/docs/vu...
刚接触Ant Design Vue的童鞋们可能会有这样的问题，不就是批改默认的组件款式吗，为什么一会失效，一会又不失效。心愿看完这个文章，会给你一些播种\~
一、想要批改组件的默认款式，首先你须要晓得组件是渲染在哪里的
这个组件是渲染在以后页面外部，还是脱离vue根节点独自渲染？（根节点默认id="app"）
这个问题的答案很容易失去，关上文章顶部的antdv官网文档，任意选中组件，F12关上调试，察看Elements，例如：
1、不难看出，button是渲染在以后页面外部的，包裹在"#app"的容器里。这样的组件还有很多，比方input、radio等等。再看上面这张图：
2、dropdown组件则是一部分渲染在#app内，一部分渲染在"#app"的里面且与"#app"同级。这样的组件也有很多，比方select、drawer、modal等等
3、dropdown等，咱们发现它们的共同点：这些组件都是“触发型”组件，都是由用户hover、click等手动激活后，进行了动静渲染的
确定了这一点之后有什么用呢？
第二类组件，class类名设置的仅仅是#app外部元素，而渲染在#app之外的那局部节点，须要独自设置类名，比方 tooltip，咱们设置overlayClassName="overlay-class"来测试：
咱们发现类名曾经设置好了。这一条解决了 没有对应到本人的父级类会造成的款式不失效 的问题
不同组件设置的属性名称不完全相同，应用时去查阅文档就能够了
二、类名scoped的限度
你是否会有这样的纳闷，为什么有的须要设置 >>> 或者 /deep/ 来重写深层款式，有的却不须要？
开发时，咱们会依据须要设置每个页面、组件css 的 scoped属性，家喻户晓，这个属性是为了限度css只被以后vue文件所应用，那它是如何实现这个限度的呢？
咱们任意关上一个scoped的页面,关上调试
咱们能够发现，这个页面的简直所有节点，都有了一个独特的“标识”
咱们在elements中关上对应scoped的css文件：
.override { padding: 100px 100px 200px 100px;}/* 按钮 */.test-button { background: pink; border: 0;}.ant-btn-primary { background: #ccc; border: 0;}/* 面包屑 */.container >>> .ant-breadcrumb-separator { margin: 10px;}.container /deep/ .ant-breadcrumb-separator { margin: 30px;}发现css也被编译成了具备标识的！