Validating a form using Styled-components doesn't behave like CSS - css

Question

I've found a very simple and efficient tutorial to handle form validation and errors handling with just React and CSS : https://medium.com/#everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f
This solution is working like a charm. But I wanted to reproduce the exact same behavior using the css-in-js library styled-components.
The solution to handle the errors in the tutorial was to switch the class of the FORM and target the pseudo class :invalid of the input child to apply a red border around the inputs. And it works perfectly using just CSS classes. I tried to use the same system with styled-components, but it went wrong.
I did 2 fiddle to show you the difference in behavior
Only CSS => fiddle with css
js
const Form = () => {
const [error, setError] = React.useState(false)
const handleSubmit = React.useCallback((event) => {
event.preventDefault()
if (!event.target.checkValidity()) {
setError(true);
return;
}
setError(false)
console.log('Do something')
}, [error, setError])
return(
<div>
<h1>With pure CSS</h1>
<h2>Good behavior : </h2>
<h2>1 . Press submit => the input goes red </h2>
<h2>2 . Fill one of the input => cleans the red border individually</h2>
<form
onSubmit={handleSubmit}
noValidate
className={error ? "displayErrors" : ""}
>
<input className='input' required></input>
<input className='input' required></input>
<input type="submit" value="Submit!"></input>
</form>
</div>
)
}
ReactDOM.render(<Form />, document.querySelector("#app"))
css
.displayErrors input:invalid {
border-color: red;
}
Using styled-components => Fiddle with styled-components
const StyledInput = styled.input`
margin-right: 5px;
display: table-cell;
margin-bottom: 10px;
outline: none;
`
const StyledForm = styled.form`
&:invalid ${StyledInput} {
border-color: ${props => {
console.log(props.error)
return props.error ? "red" : "none"
}};
}
`;
const Form = () => {
const [error, setError] = React.useState(false)
const handleSubmit = React.useCallback((event) => {
event.preventDefault()
if (!event.target.checkValidity()) {
setError(true);
return;
}
setError(false)
console.log('Do something')
}, [error, setError])
return(
<div>
<h1>With Styled components</h1>
<h2>To reproduce the issue : </h2>
<h2>1 - press submit, the inputs goes red </h2>
<h2>2 - fill one input => ISSUE => the input (which is no more invalid) stays red </h2>
<StyledForm
onSubmit={handleSubmit}
noValidate
error={error}
>
<StyledInput className='input' required></StyledInput>
<StyledInput className='input' required></StyledInput>
<input type="submit" value="Submit!"></input>
</StyledForm>
</div>
)
}
ReactDOM.render(<Form />, document.querySelector("#app"))
The expected behavior on the first fiddle (CSS):
Press submit, the inputs goes red
Fill one input => The red border is cleaned individually (which means one input status doesn't depend on the other)
To reproduce the issue on the second fiddle (Styled-components):
Press submit, the inputs goes red
Fill one input => ISSUE => the input (which is no more invalid) stays red as long as the second input is still invalid (which means the two input are related).
My problem is that in the styled-components version the red borders of the inputs are cleaned when the both of the inputs are valid. But I want the inputs to act individually like in the CSS version.
I know there is 100 of solutions to solve the problem but I really liked the easy and clean solution of the tutorial. I expected to have the same behavior on both sides, could be a bug? Is there something i'm missing? Please help <3