Question

将样式传递给Material UI自动完成中的inputProp = {}会创建“ useAutocomplete.js：919 Uncaught TypeError：无法读取属性'focus'为null”的错误。这是示例代码：

renderInput={params => (
          <div>
            <TextField
              multiline={false}
              classes={{
                root: classes.textField
              }}
              {...params}
              variant="outlined"
              placeholder="Search"
              inputProps={{ classes: { root: classes.text } }}
            />
          </div>
)}

我不太了解问题，有什么建议吗？

Answer 1

inputProps实际上与InputProps

不同

inputProps定义：

Attributes应用于输入元素。

InputProps定义：

应用于输入元素的道具。这将是一个FilledInput， OutlinedInput或Input组件，取决于变量prop的值。

在您的情况下，您将要使用大写字母I（即InputProps）的1

引用：https://material-ui.com/api/text-field/#props

Answer 2

我在这里找到了解决方法：

Setting text color, outline, and padding on Material-ui Autocomplete component

“这是您尝试过的方法（虽然样式有效，但破坏了自动完成功能）：

renderInput={params => (
    <TextField
       {...params}
       label=""
       InputProps={{
          className: classes.inputColor
       }}
       variant="outlined"
       fullWidth
    />
)}

上述方法引起问题，因为自动完成组件将InputProps作为传递给TextField的参数的一部分进行传递，因此显式传递的InputProps将完全替换参数中的InputProps。

相反，您应该将inputRoot CSS类用于Autocomplete组件：

<Autocomplete classes={{inputRoot: classes.inputRoot}} .../>

”

材质UI自动组件：将样式传递给inputProp = {}会产生错误

2 个答案: