React jsx conditional styling of <input/> component - css

Question

I am conditionally styling my <input/> (standard HTML) component. I am passing inline JSX style as a 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}
</>
);
}
My conditional styles work, and <input/> border colour changes based on this.state.error and this.state.value, however I can't get '&:hover' style to work. I have checked my .css and there is nothing overriding the style passed as props.
I have tried another approach, where I conditionally set className for my <input/> and define style in external .css file. It works and I can change border colour with:
input[type="text"]:hover {
border: 2px solid pink;
}
However, I would like to make this work in inline JSX. Why does my style for '&:hover': { ... } not work?

Answer 1

The "&" operator mean the current selector in preprocessing language like sass:
input {
&:hover {
background: red;
}
}
Will compile to:
input:hover {
background: red;
}
But you will have to use sass or styled component to use that sync tax.

Answer 2

Pseudo css selectors don't work in inline style.btw I would not recommend any of the js solution in the comments above .you need a more a robust css solution to handle all kind of pseudo selectors.
Your options are:
Use css in js solution like styled-components.https://styled-components.com/
Use regular css or scss and condionaly switch classNames.You
can utilize classnames library for easier experience.https://www.npmjs.com/package/classnames
Render style tag above your input and put your input styles there.quite bad practice and ugly.