时间戳

首页 > 解决方案 > Material UI Autocomponent：将样式传递给 inputProp={} 会产生错误

reactjs - Material UI Autocomponent：将样式传递给 inputProp={} 会产生错误

问题描述

在 Material UI 自动完成中将样式传递给 inputProp={} 会产生“useAutocomplete.js:919 Uncaught TypeError: Cannot read property 'focus' of null”错误。这是示例代码：

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

我不太明白这个问题，有什么建议吗？

标签： reactjsautocompletematerial-ui

解决方案

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

在 Material-ui Autocomplete 组件上设置文本颜色、轮廓和填充

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

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

上述方法会导致问题，因为 Autocomplete 组件将 InputProps 作为传递给 TextField 的参数的一部分传递，因此显式传递的 InputProps 将完全替换 params 中的 InputProps。

相反，您应该为 Autocomplete 组件利用 inputRoot CSS 类：

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

"

推荐阅读