如何修改ant design部分组件的样式

一、去除Antd的Button组件两个汉字中间的空格

import { Button, ConfigProvider } from 'antd';
  
       

二、去掉input聚焦时的蓝色边框

.ant-input:focus{
    box-shadow:none;
}

三、去掉点击button时的动画

.ant-btn::after {
    border: 0 none;
    opacity: 0;
    animation:none 0 ease 0 1 normal;
  }

四、替换搜索框的icon

.anticon-search{
    width: xxpx;
    height: xxpx;
    background-image: url(xx/xx.png);
    background-size: cover;
}
.anticon-search>svg{
    width: 0;
    height: 0;
}

五、修改树形控件选中项的背景色

.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #bae7ff;
}

六、解决react里input输入时显示[object Object]

 onChange={e => SetInputValue(e.target.value)}

七、ant design的气泡卡片组件Popover的弹窗里设置输入框
从content属性入手,content属性值设置为包含input的组件(该组件里不要使用Input组件,直接使用input,否则崩溃)

八、设置input的宽度随输入内容长度的变化而变化:
设置一个兄弟节点span,span显示的内容绑定input的value,通过定位让span隐藏在input下

{inputValue} SetInputValue(e.target.value)} />
.input-wrapper{ position: relative; min-width:150px; margin-right: 10px; span{ display:block; min-width:100px; height:32px; line-height:32px; font-size:14px; padding-right: 10px; } input{ border:none; outline:none; box-shadow:none; width:100%; height:32px; line-height:32px; font-size:14px; position: absolute; top: 0px; left: 0px; } }

九、如何让antd的Modal组件的确认和取消不显示

 
            

十、如何改变Icon的大小和颜色


你可能感兴趣的:(如何修改ant design部分组件的样式)