Question

当我专注于输入字段时，我正在尝试更改输入字段边框。当前它显示blue。我想将其更改为red或其他颜色。

我尝试使用传递道具

function Control(props) {
  console.log(props)
  return (
    <TextField
      fullWidth
      InputProps={{
        inputComponent,
        inputProps: {
          className: props.selectProps.classes.input,
          inputRef: props.innerRef,
          children: props.children,
         classes:{underline: props.selectProps.classes.underlineInput,
          root: props.selectProps.classes.inputRoot,
          focused: props.selectProps.classes.focusedLabel,},

          ...props.innerProps
        }
      }}
      {...props.selectProps.textFieldProps}
    />
  );
}

underline: props.selectProps.classes.underlineInput试图更改输入字段的边框颜色。但是为什么不起作用？

这是我的代码 https://codesandbox.io/s/71267zp3l6

Answer 1

在您的CSS文件上添加此类。它使用!important进行覆盖。

.MuiInput-underline-44:after {
    border-bottom: 2px solid #9f3063 !important;
}

为什么Textfield控件不带道具（类）？

1 个答案: