ant-design-vue修改input和checkbox的组件样式

最新推荐文章于 2024-05-22 11:03:26 发布

陌~上花开

最新推荐文章于 2024-05-22 11:03:26 发布

阅读量4k

点赞数 2

分类专栏： ant-design of vue vue

本文链接：https://blog.csdn.net/weixin_45803990/article/details/116398126

版权

vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

ant-design of vue

8 篇文章 1 订阅

订阅专栏

vscode中安装这个插件，可以快捷输入ant design vue……
在这里插入图片描述

刚开始接触ant-design的时候改样式改到崩溃……无从下手

有的直接写行内样式就生效了
有的在less文件内去掉style标签内的scoped属性的时候也可以直接修改，这样会影响到其他组件内的样式。不太好这样
以上都不行，就要定义在全局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样式。

修改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;
    background-color: transparent;
  }
} 
// 设置选中的颜色
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #1BBA79;
    border: 2px solid #1BBA79;
  }