Is there a way to use a selector to change the border color for Mantine V6 TextInput
when the error is set?
I can do this by setting the borderColor within the sx
object as follows:
<TextInput sx={{ borderColor: error ? 'red' : 'green' }} />
but then I have to set the standard borderColor as well.
Using devtools, I can see that they have a data-invalid
class, but can’t seem to find a way to use a selector to target that:
.mantine-188bo4n[data-invalid] {
color: #fa5252;
border-color: #fa5252;
}
I know they have the errors
property within the styles object but that seems to just target the error text under the input.
Any help would be much appreciated.
Note: I’m using inline styles and the sx prop. I do not want to be using external css files.