修改框架中的默认样式 例:修改antd中Input组件获取焦点时的蓝色边框

antd中的组件样式默认是蓝色的,但实际项目中需要根据皮肤颜色进行切换.于是使用公共样式,覆盖组件本身的样式.需求是 移入input框变成灰色,点击选择的时候更换颜色
为了更好的演示代码. 移入变成红色 点击后变成橙色
修改前:

修改后:

代码如下:

.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
    border-color: #C0C4CC;
}
.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled){
    border-color:#fea91d
    box-shadow: none;
}

怎么找到相应的样式:

右键点击之后查看样式, 点开:hov 选择 :hover :focus 即可查看移入 聚焦的样式 .

因为他的样式是设置在子元素上面 所以也要去他的子元素才能找到相应的样式,上面那个橙色小店代表的就是父元素 已经打开了:hov设置 下面框中的地方 则是可以修改的默认样式