共计 1404 个字符，预计需要花费 4 分钟才能阅读完成。
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 也被编译成了具备标识的！
重要的是，设置在 /deep/ 和 >>> 前面的类，在编译之后，是没有这个标识的！
发现了这一点之后，咱们不须要去管是什么页面，用的什么组件，只须要关上 Elements 面板，察看你要写的节点 class，有没有这个“标识”。如果有的话，失常写 css，类名就会被编译成有“标识”的；如果没有的话，须要设置在 /deep/、>>> 之后，编译后就会拿掉这个标识
以上两点，第一点解决了没有父级类的问题，第二点解决了 scoped 造成的没有对应到父级类的问题. 心愿对你有所帮忙
若以上两点依然没有解决你的问题，欢送留言，咱们一起摸索更多
正文完
