React JSX условное моделирование составная часть

Question

Я условно укладываю свой <input/> (стандартный HTML) компонент. Я передаю встроенный стиль JSX в виде style prop:

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

Но вам придется использовать sass или стиль компонента , чтобы использовать этот налог c налог.

Answer 2

Селекторы

Pseudo css не работают во встроенном стиле. Кстати, я бы не рекомендовал ни одно из решений js в комментариях выше. Вам нужно более надежное решение css для обработки всех видов псевдоселекторов. , Возможны следующие варианты:

1. Использование css в js решениях, подобных стилевым компонентам. https://styled-components.com/

2. Используйте обычные css или s css и условные ключи classNames.Вы можете использовать библиотеку имён классов для облегчения работы. https://www.npmjs.com/package/classnames

3. Тег стиля рендеринга выше ваш ввод и поместите ваши стили ввода там. довольно плохая практика и некрасиво.