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样式。
// 鼠标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;
}