组件的React jsx条件样式

Question

我正在有条件地设置我的

render() {
  return (
    <>
      <input
        type="text"
        style={{
          width: "100%",
          paddingLeft: "8px",
          paddingTop: "6px",
          paddingBottom: "6px",

          border: this.state.error
            ? "2px solid red"
            : this.state.value
            ? "2px solid #2684ff"
            : "2px solid hsl(0, 0%, 80%)",
          outline: "0px",

          "&:hover": {
            border: "2px solid green"
          }
        }}
        placeholder={this.props.placeholder}
        onChange={this.handleInput}
        onFocus={this.checkErrors}
        value={this.state.value}
        onBlur={this.sendData}
      />

      {this.state.error ? (
        <div className="errorMsg"> {this.props.errorMsg} </div>
      ) : null}
    </>
  );
}

我的条件样式有效，并且

我尝试了另一种方法，在那里我有条件地为我的设置className

    input[type="text"]:hover {
      border: 2px solid pink;
    }

然而，我想在内联JSX中完成这项工作。为什么我的风格




Answer 1

伪css选择器在内联中不起作用style.btw我不推荐上面评论中的任何js解决方案。你需要一个更健壮的css解决方案来处理所有类型的伪选择器。您的选择是：

>

在js解决方案中使用css，如styled-components.https：//styled-components.com/

使用常规css或scss和条件开关类名称。您可以利用类名库更容易experience.https：//www.npmjs.com/package/classnames

在输入上方渲染样式标签，并将输入样式放在那里。这是一种非常糟糕的做法，而且很难看。

Answer 2

"

input {
  &:hover {
    background: red;
  }
}

将编译为：

input:hover {
  background: red;
}

但您必须使用sass或样式化组件才能使用同步税。