响应< jsx />组件的jsx条件样式

Question

我有条件地为我的<input/> (标准HTML)组件设置样式。我将内联JSX样式作为style工具传递：

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

我的条件样式可以工作，<input/>边框的颜色是基于this.state.error和this.state.value的，但是不能让'&:hover'样式工作。我已经检查了我的.css，没有什么可以超越作为道具传递的样式。

我尝试了另一种方法，有条件地为我的className设置<input/>，并在外部.css文件中定义样式。它工作，我可以通过以下方式改变边框颜色：

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

然而，我想使这个工作在内嵌的JSX。为什么我的'&:hover': { ... }风格不起作用？

Answer 1

"&“运算符是指像sass这样的预处理语言中的当前选择器：

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

将汇编成：

input:hover {
  background: red;
}

但是，您必须使用沙斯或样式元件来使用同步税。

Answer 2

伪css选择器不能在内联style.btw中工作--我不推荐上面.you注释中的任何js解决方案，需要一个更健壮的css解决方案来处理所有类型的伪选择器。你的选择是：

1. 在js解决方案中使用css，如样式组件.https://styled-components.com/
2. 使用常规的css或scss，并在条件下切换classNames.You可以利用类库来获得更好的体验。https://www.npmjs.com/package/classnames
3. 渲染样式标签高于您的输入，并将您的输入样式there.quite不良实践和丑陋。