Style attributes doesn't work on Input with suffix or prefix

Question

setting Style attributes is working with that.

 <Input
      style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
      placeholder="this works"
      onMouseEnter={() => this.setState({ focused: true })}
      onMouseLeave={() => this.setState({ focused: false })}
    />

However, when I use the suffix or prefix attribute of Input component, It doesn't work.

    <Input
          style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
          placeholder="not this"
          /*only difference is this suffix line*/
          suffix={<Icon type="save" />}
          onMouseEnter={() => this.setState({ focused: true })}
          onMouseLeave={() => this.setState({ focused: false })}
        />

When I check the source codes on browser, It gives me the reason.

1.case :

<input placeholder="this works" type="text" class="ant-input" style="border-width: 1px;">

2.case :

<span class="ant-input-affix-wrapper" style="border-width: 1px;"><input placeholder="not this" type="text" class="ant-input"><span class="ant-input-suffix"><i class="anticon anticon-save"></i></span></span>

the reason for 2. case span block absorbs the style.

running demo

So How can I set my style on a input that has a suffix/prefix attribute.

Answer 1

style property on input with suffix or prefix property isn't supported in the implementation of Input component.

See https://github.com/ant-design/ant-design/blob/3.10.7/components/input/Input.tsx#L170

{prefix}
{React.cloneElement(children, { style: null, className: this.getInputClassName() })}
{suffix}

You can work around this by passing className property for the Input component.

Say you have these CSS definitions in a stylesheet,

.border-sm input, input.border-sm {
  border-width: 1px;
}

.border-lg input, input.border-lg {
  border-width: 4px;
}

Your implementation for the Inputs can look like so:

//...
import "./style.css"

class ErrorExample extends React.Component {
  //...

  render() {
    return (
      <div>
        <h1>Enter mouse into one of textboxes</h1>
        <Input
          className={this.state.focused ? "border-lg" : "border-sm"}
          //...
        />
        <Input
          className={this.state.focused ? "border-lg" : "border-sm"}
          suffix={<Icon type="save" />}
          //...
        />
      </div>
    );
  }
}