react&antd（6）js原生input文件上传框样式美化

在上个需求中虽然功能完成了，但是原生input框的样式太简陋了，不符合页面的整体风格，而且上面三个输入框也没有对齐，所以需要美化样式
思路：input框可以先把之前的按钮透明度opacity设置为0,然后外层用div包裹。通过冒号对齐antd提供了相应方法，可以去antd搜索form表单
修改前：

修改后(这样模态框就好看多了)

js代码

<div className={styles.fileBox}>
              <Input type="file" onChange={e => this.Upload(e)} accept='text/plain' className={styles.fileBtn}></Input>
              <CloudUploadOutlined />上传txt文件
              </div>

css

/* 原生的上传文件input样式修改 */
.fileBox{
    margin-left: 99px;
    /*  */
    display: inline-block; 
    position: relative;
    padding: 3px 5px;
    overflow: hidden;
    color: #fff;
    background-color: rgb(49, 150, 233);
    height: 32px;
    border-radius: 3px;
    vertical-align: bottom;
}
  
.fileBtn{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    background-color: transparent;
    filter: alpha(opacity=0);
    -moz-opacity:0;
    opacity: 0;
    cursor: pointer;
}