javascript - 样式属性不适用于带后缀或前缀的输入

Question

设置 Style 属性可以解决这个问题。

 <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.案例:

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

2.案例:

<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.case span block 吸收样式的原因。

running demo

那么如何在具有后缀/前缀属性的输入上设置我的样式。

Answer 1

input 上带有 suffix 或 prefix 属性的

style 属性在 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}

您可以通过为 Input 组件传递 className 属性来解决这个问题。

假设您在样式表中有这些 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>
    );
  }
}