vue+antd样式自定义修改

3,594 阅读1分钟

1、在vue项目中使用antd组件,遇到想修改一下组件的样式,常用的方法是看一下api有没有自带的可以修改,像这种;

WX20210531-103454@2x.png 2、但是,如果这个api不是自己想要修改的,那么自己先给组件添加一个className,然后再控制台中找到当前的className,然后再修改;

WX20210531-104130@2x.png WX20210531-104050@2x.png image.png 这种就是自己在api中找到给组件命名的className的api,设置一下,就可以在控制台看到了,我也是这样做的,但是后面就有一个小问题,我当时添加以后,但是在文件中去修改样式时,始终不生效,加/deep/同样不生效;

image.png

image.png

3、思来想去,仔细研究了一下这个组件在控制台的位置,发现不在当前文件下,而是在body的下面;

image.png 然后再看了一下右边的styles控制台,元素属性样式在index.scss里,这就知道了,添加的地方错了;

image.png 找到项目中assets文件下面的index.scss文件,添加修改

image.png

image.png 终于,生效了,方法很简单,但是存在一个小小的坑,给自己记录一下,给大家分享一下。