MaterialUITextField，格式必填欄位

我想更改表單 (react-hooks-form) 中必需的 TextFields 的下劃線邊框顏色。

我想我需要為這些創建一個樣式，但這里是我卡住的地方......

這是我的代碼：

場地：

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

款式：

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

我試圖添加邊框顏色，但它不起作用。

到目前為止，我發現的唯一解決方案是使歸檔集中...

更新 #2：可能的解決方案向 TextField 添加樣式：

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

uj5u.com熱心網友回復：

如果您只想更改 textFied 邊框的邊框顏色：

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

或在 textField 中：

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

uj5u.com熱心網友回復：

你必須使用classes道具 ofInputProps而不是className并瞄準input.

<TextField
  id="date"
  type="date"
  label="date"
  value={value}
  onChange={onChange}
  error={!!error}
  helperText={error?.message}
  InputLabelProps={{
    shrink: true
  }}
  InputProps={{ classes: { input: classes.mandatory } }}
/>

uj5u.com熱心網友回復：

你可以試試嗎

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

然后添加樣式

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

標籤：javascript 反应 材质-ui 文本域 反应钩形

上一篇：為展平樹中的每個物件創建一個級別

下一篇：Bootstrap-select不適用于Bootstrap5