修改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.js # css # html5
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue