Question

正在设置样式属性。

user update

但是，当我使用Input组件的后缀或前缀属性时，它不起作用。

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

当我在浏览器上检查源代码时，它给出了原因。

1.case：

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

2.case：

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

2. case span块吸收样式的原因。

running demo

因此，如何在具有后缀/前缀属性的输入上设置样式。

Answer 1

输入组件的实现不支持style上具有input或suffix属性的

prefix属性。

请参见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>
    );
  }
}

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

1 个答案: