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

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

import { Button, ConfigProvider } from 'antd';
 <ConfigProvider autoInsertSpaceInButton = { false }> 
       <Button type="primary">
              空格
      </Button>
</ConfigProvider>

二、去掉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下

<div className="input-wrapper">
               <span id="spanNode">{inputValue}</span>
                <input 
                    id="inputNode"
                    type ="text"
                    placeholder="the Sight_notes"
                    value={inputValue}
                    onChange={e => SetInputValue(e.target.value)}
                />
            </div>

.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组件的确认和取消不显示

<Modal 
                style={modelStyle} width="800px" 
                title="xxx" 
                visible={isModalVisible}
                footer={null}
                onOk={handleOk}
                onCancel={handleCancel}> 
            </Modal>

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

<CaretUpOutlined style={{fontSize:"10px",color:"#006BBF"}}/>