Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

antd Input标签 添加suffix去除border边框

<div className="oneBoxTitle">
     嗷嗷 : 
     <Input 
        defaultValue={item.name} 
        style={{flex:"1",marginLeft:"10px",border:"0px",marginRight:"5px",outline:"none"}} 
        size="small" 
        onChange={this.onchangeSName} onFocus={this.onfocusS} 
        onBlur={()=>this.onchangeSNameOut(Id)} 
        suffix={<Tooltip title="可编辑" 
        style={{border:"3px solid pink",}}> <Icon type="edit" style={{ color: 'rgba(0,0,0,.45)' }} /> </Tooltip>}
     /> 
</div>

用了border:"0px",border:"none",outline:"none"都没有用啊
但是去掉suffix就没有border了
那使用suffix的时候怎么清除border


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

加了suffix以后Input对应的dom结构变成了

<span>
    <input />
</span>

没有suffix直接是

<input />

可以这样

// js 
<Input 
      className={style.item} 
 /> 
 // css
 .item{
    input{
        border: none !important;
    }
 }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...