CODEWITHSUNDEEP
javascriptreactjsmaterial-uitextfieldreact-hook-form
Alex Bran
Alex Bran

Reputation: 463

Material UI TextField, format mandatory fields

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' }}
                        />

Upvotes: 0

Views: 637

Answers (2)

Chinmay Dey
Chinmay Dey

Reputation: 144

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%)'
    }

Upvotes: 0

Samira
Samira

Reputation: 2753

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",
                                       }
                                   }}
                        />

Upvotes: 1

Related Questions