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 也被编译成了具备标识的!