Ant Design Vue 修改组件样式

修改Ant Design Vue组件样式项目中要求使用ant design vue作为第三方ui框架，但是设计图上的要求与ui框架官网的有细微的差别，需要手动修改，当时我的想法就是先f12打开控制器自己先修改样式，改好以后连样式名和样式一起复制到<style>上直接加上就好了，但并没有成功，现在提出我找到的解决方法第一种就是查看文档上面是否提供了可供修改的属性如headstyle，bo

白日青空_Seaf

12131人浏览 · 2020-06-10 17:47:00

白日青空_Seaf · 2020-06-10 17:47:00 发布

修改Ant Design Vue组件样式

项目中要求使用ant design vue作为第三方ui框架，但是设计图上的要求与ui框架官网的有细微的差别，需要手动修改，当时我的想法就是先f12打开控制器自己先修改样式，改好以后连样式名和样式一起复制到<style>上直接加上就好了，但并没有成功，现在提出我找到的解决方法

第一种
就是查看文档上面是否提供了可供修改的属性
如headstyle，bodystyle，dotsClass，classname等等

实测可以
修改卡片的padding值
第二种
但有的时候没提供这些属性，我们就可以自己添加class进行修改，和写css差不多
在这里插入图片描述

但是需要注意你的样式仅在当前标签生效，下面的子元素如果不是你手动添加的而是ui框架提供的，想通过该class去修改的子元素样式则不会生效
添加样式名

页面结构如下

效果aaaaaaaaa生效，下面的子元素li不生效
在这里插入图片描述
第三种穿透>>>
vue中的样式穿透，也是解决样式问题的常用方式之一，sass/less使用样式穿透的方式可能会有所不同
原样：

需要的效果：

外层 >>> 框架组件样式名

关于穿透我还不太了解，就不多解释了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^