ant-design-vue修改input和checkbox的组件样式
vscode中安装这个插件，可以快捷输⼊ant design vue……
刚开始接触ant-design的时候改样式改到崩溃……⽆从下⼿
1. 有的直接写⾏内样式就⽣效了
2. 有的在less⽂件内去掉style标签内的scoped属性的时候也可以直接修改，这样会影响到其他组件内的样式。 不太好这样
3. 以上都不⾏，就要定义在全局less中，然后去修改了。最佳⽅法，有的实在改不了，百度……
1.1 修改input输⼊框的背景⾊：
<a-input placeholder="请输⼊内容"allow-clear class="test"/>
检查元素，选中该标签
直接可以先在styles中试着修改背景⾊，可以看到样式是否改变，改变就选中前⾯的类名 .ant-input-affix-wrapper .ant-input
复制好类名后，新建⼀个global.less⽂件可以，然后在main.js中挂载下
import'./global.less'// 在main.js中引⼊
global.less:
如果不添加类名test，这就是修改所有的input输⼊框的背景⾊了。so添加个类名只修改当前的组件。
.test.ant-input-affix-wrapper .ant-input{
background: pink;
}
1.2 修改checkbox样式。
// ⿏标hover时候的颜⾊
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.
ant-checkbox-input:focus + .ant-checkbox-inner{
border: 2px solid #1BBA79 !important;
}
// 设置默认的颜⾊
.ant-checkbox{
.ant-checkbox-inner{
border: 2px solid #1BBA79;
input标签placeholder属性background-color: transparent;
}
}
// 设置选中的颜⾊
.
ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner{
background-color: #1BBA79;
border: 2px solid #1BBA79;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。