I am currently working with React Material UI's TextField element. What I aim to achieve is when the submit button is pressed, the helpertext displayed should be "Please enter the password."
It should look like this:
https://i.sstatic.net/Nu0ua.png
However, once the helpertext is shown, I want to change the border color of the TextField to a specific color defined in my SCSS file. This way, I can control the border color through the SCSS settings.
Essentially, what I need is for the TextField to have a red border and a blue outline when focused:
https://i.sstatic.net/b74i0.png
This is the code I have implemented so far:
<TextField
id="form-el-2 outlined-basic"
name="userName"
variant="outlined"
placeholder={"Please enter valid password"}
helperText={
errorMsgs.userNameErr && errorMsgs.userNameErr.length
? errorMsgs.userNameErr
: null
}
onChange={handleChange}
value={cabinetInfo.userName}
/>;
Along with the SCSS styling:
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border: 1px solid;
border-color: #c4c4c4;
outline: 1px solid $primary-color !important;
outline-offset: 1px;
}
Is it possible to achieve this effect? How can I implement this into my project? Any assistance would be greatly appreciated. Thank you in advance.