I want to change the underline border color of the TextFields which are mandatory in a form (react-hooks-form).
I suppose I need to create a style for these, but here is where I got stuck...
This is my code:
field:
<Controller
name="date"
control={control}
defaultValue={props.operation === 'edit' ? props.values.date : null}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
id="date"
type="date"
label="date"
value={value}
className={classes.textField}
onChange={(event) => {
onChange(event.target.value);
setValue('week', getWeek(event.target.value))
}}
error={!!error}
helperText={error ? error.message : null}
InputLabelProps={{
shrink: true,
}}
///added
InputProps={{
className: classes.mandatory,
}}
/>
)}
rules={{ required: 'Date is required' }}
/>
styles:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& .MuiTextField-root': {
margin: theme.spacing(2),
width: '26ch',
},
},
///added
mandatory: {
borderBottom: '1px solid rgb(215 50 50 / 70%)'
}
}),
);
I have tried to add the border color, but it doesn't work.
The only solution I found until now is to make the filed focused...
UPDATE #2: possible solution add style to TextField:
<TextField
{...params }
error={!!error}
helperText={error ? error.message : null}
label="appel*"
className={`mandatory ${classes.textField}`}
style={{ borderBottom: '1px solid red' }}
/>
if you just want to change the border-color of textFied border :
"& .css-h5voop-MuiInputBase-root-MuiInput-root:before": {
borderBottom:" 1px solid rgb(215 50 50 / 70%)",
},
or in textField :
<TextField variant="standard" required label="Ship Name" name="name"
InputProps={{
disableUnderline:true,
sx:{
borderBottom:"2px solid green",
}
}}
/>
Could you try, please
<Controller
name="date"
control={control}
defaultValue={props.operation === 'edit' ? props.values.date : null}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
id="date"
type="date"
label="date"
value={value}
className={`mandatory ${classes.textField}`}
onChange={(event) => {
onChange(event.target.value);
setValue('week', getWeek(event.target.value))
}}
error={!!error}
helperText={error ? error.message : null}
InputLabelProps={{
shrink: true,
}}
/>
)}
rules={{ required: 'Date is required' }}
/>
then add style
.mandatory fieldset[aria-hidden="true"] {
borderBottom: '1px solid rgb(215 50 50 / 70%)'
}