AntDesignVue地址：https://www.antdv.com/docs/vu...刚接触AntDesignVue的童鞋可能会有这样的问题，是不是就是修改默认的组件样式，为什么一会儿生效一会儿不生效。希望看完这篇文章，能给大家带来一些收获~1、想要修改一个组件的默认样式，首先要知道这个组件是在哪里渲染的。这个组件是在当前页面内部渲染的，还是独立于Vue根节点渲染的？（根节点的默认id="app"）这个问题的答案很容易得到。打开文章顶部的antdv官方文档，选择任意一个组件，按F12打开调试，观察Elements，例如：1.不难看出按钮渲染在当前页面里面，包裹在“#app”容器中。这样的组件有很多，比如input，radio等等。再看下图：2、下拉组件部分渲染在#app内部，部分渲染在“#app”外部，与“#app”同级。这样的组件也有很多，比如select、drawer等。3、dropdown等，我们发现它们有一个共同点：这些组件都是“触发型”组件，由用户悬停、点击等手动激活.,然后动态渲染。确认了这一点，有什么用呢？对于第二种组件，只为#app内部元素设置类名，在#app外渲染的节点部分需要单独设置类名，比如tooltip，我们设置overlayClassName="overlay-class"进行测试：我们发现类名已经设置好了。本文解决样式不对应自身父类不生效的问题。不同组件设置的属性名称并不完全相同。使用时可以查阅文档。疑惑，为什么有的需要设置>>>或者/deep/重写deep样式，有的不需要？在开发的时候，我们会根据需要设置每个页面和组件css的scoped属性。众所周知，这个属性就是限制css只能被当前vue文件使用，那么这个限制是怎么实现的呢？我们任意打开一个scoped页面，打开调试可以发现，这个页面的几乎所有节点都有一个共同的“身份”。我们在elements中打开对应scoped的css文件，看看实际的编写和渲染。relationship.override{padding:100px100px200px100px;}/*button*/.test-button{background:pink;border:0;}.ant-btn-primary{背景：#ccc;border:0;}/*Breadcrumbs*/.container>>>.ant-breadcrumb-separator{margin:10px;}.container/deep/.ant-breadcrumb-separator{margin:30px;}发现css是还编成logo！重要的是/deep/和>>>后面设置的类在编译后没有这个标志！发现这一点后，我们就不需要关心使用的是什么页面或组件了。我们只需要打开Elements面板，观察你要写的节点类有没有这个“标识”。如果有，就正常写css，类名会编译成“logo”；如果不是，需要在/deep/后设置，>>>，编译后会去掉logo。3、使用/时deep/,>>>,parentClass所在节点没有“标识”怎么办根据前面的总结，设置scoped后，此时的parentClass被编译成一个“logo”，而sonClass是没有“logo”的。.parentClass>>>.sonClass.parentClass/deep/.sonClass在实际使用中，如果parentClass所在节点没有“标识”怎么办？比如antdvue的组件，在#app外渲染，按照第一篇已经给了一个自定义类名wrapClassName，但是我们还是不能使用这个wrapClassName，因为它所在的div没有这个“身份”（在极少数情况下会出现）此时我们拿出终极武器， 一些内容... 一些内容... 一些内容...
