一、去除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"}}/>