Блог

Я хочу изменить цвет подчеркивания границ текстовых полей, которые являются обязательными в форме (react-крючки-форма).

Я предполагаю, что мне нужно создать стиль для них, но вот где я застрял…

Это мой код:

поле:

 lt;Controller  name="date"  control={control}  defaultValue={props.operation === 'edit' ? props.values.date : null}  render={({ field: { onChange, value }, fieldState: { error } }) =gt; (  lt;TextField  id="date"  type="date"  label="date"    value={value}  className={classes.textField}  onChange={(event) =gt; {  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,  }}  /gt;  )}  rules={{ required: 'Date is required' }}  /gt;   

стили:

 const useStyles = makeStyles((theme: Theme) =gt;  createStyles({  root: {  'amp; .MuiTextField-root': {  margin: theme.spacing(2),  width: '26ch',  },  },  ///added  mandatory: {  borderBottom: '1px solid rgb(215 50 50 / 70%)'  }  }), );  

Я пытался добавить цвет границы, но это не работает.

Единственное решение, которое я нашел до сих пор, — это сфокусировать файл…

ОБНОВЛЕНИЕ №2: возможное решение добавить стиль в текстовое поле:

 lt;TextField  {...params }  error={!!error}  helperText={error ? error.message : null}  label="appel*"  className={`mandatory ${classes.textField}`}  style={{ borderBottom: '1px solid red' }}  /gt;  

если вы просто хотите изменить границу-цвет текстовой границы :

 "amp; .css-h5voop-MuiInputBase-root-MuiInput-root:before": {  borderBottom:" 1px solid rgb(215 50 50 / 70%)",  },  

или в текстовом поле :

 lt;TextField variant="standard" required label="Ship Name" name="name"    InputProps={{  disableUnderline:true,  sx:{  borderBottom:"2px solid green",  }  }}  /gt;  

Не могли бы вы попробовать, пожалуйста

 lt;Controller  name="date"  control={control}  defaultValue={props.operation === 'edit' ? props.values.date : null}  render={({ field: { onChange, value }, fieldState: { error } }) =gt; (  lt;TextField  id="date"  type="date"  label="date"    value={value}  className={`mandatory ${classes.textField}`}  onChange={(event) =gt; {  onChange(event.target.value);  setValue('week', getWeek(event.target.value))  }}  error={!!error}  helperText={error ? error.message : null}  InputLabelProps={{  shrink: true,  }}  /gt;  )}  rules={{ required: 'Date is required' }}  /gt;  

затем добавьте стиль

 .mandatory fieldset[aria-hidden="true"] {  borderBottom: '1px solid rgb(215 50 50 / 70%)'  }