Атрибуты стиля не работают при вводе с суффиксом или префиксом

Question

настройка атрибутов стиля работает с этим.

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

Однако, когда я использую атрибут суффикса или префикса компонента Input , он не работает.

    <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 })}
        />

Когда я проверяю исходные коды в браузере, это дает мне причину.

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>

причина 2. случайблок span поглощает стиль.

демонстрационная программа

Итак, как мне установить свой стиль на входе, который имеет атрибут суффикса / префикса.

Answer 1

Свойство

style для input со свойством suffix или prefix не поддерживается в реализации компонента Input.

См. 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}

Вы можете обойти это, передав свойство className для компонента Input.

Допустим, у вас есть эти определения CSS в таблице стилей,

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

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

Ваша реализация для Inputможет выглядеть так:

//...
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>
    );
  }
}