Question

我们想更改Material-ui自动完成组件上的文本颜色，轮廓和填充。

代码如下：

              <FormControlLabel
                label="Please enter desired service:"
                labelPlacement="start"
                control={
                  <Autocomplete
                    id="services"
                    options={props.serviceTypes}
                    getOptionLabel={option => option.name}
                    className={classes.inputRoot}
                    style={{ width: 400, paddingLeft: 20 }}
                    renderInput={params => (
                      <TextField
                        {...params}
                        label=""
                        className={classes.inputRoot}
                        variant="outlined"
                        fullWidth
                      />
                    )}
                    onChange={setService}
                  />
                }
              />

我们可以通过这样的代码更改TextInput颜色

                        InputProps={{
                          className: classes.inputColor
                        }}

但是以这种方式应用样式会影响“自动完成”功能（它会失去自动完成功能，其行为类似于普通的TextField）。

我们尝试了许多style和className选项，但无济于事。

感谢任何建议。

Answer 1

这是您尝试过的方法（在样式上可以使用，但破坏了自动完成功能）：

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

上述方法会导致问题，因为Autocomplete组件passes InputProps是传递给params的{{1}}的一部分，因此显式传递的TextField将完全替代InputProps中的InputProps。

相反，您应该利用params CSS class for the Autocomplete component：

inputRoot

下面是一个工作示例，该示例设置文本颜色并自定义轮廓颜色。

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

相关答案：

Change border color on Material-UI TextField

Answer 2

我在文档中发现有两种类型的“inputprops”

所以结果代码是

<Autocomplete
  id="country-select-demo"
  options={dialCodes}
  underlineStyle={{ display: 'none' }}
  InputProps={{ disableUnderline: uderline }}
  autoHighlight
  getOptionLabel={(option) => option.phone}
  renderOption={(option) => (
    <div className="w-100">
      {option.phone}
    </div>
  )}
  renderInput={(params) => (
    <TextField
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...params}
      disableUnderline={false}
 
 InputProps={{ ...params.InputProps, disableUnderline: true }}
        // eslint-disable-next-line react/jsx-no-duplicate-props
 inputProps={{
        ...params.inputProps,
      }}
    />
  )}
/>

在上面的代码中，我添加了两次输入道具。

InputProps={{ ...params.InputProps, disableUnderline: true }}
inputProps={{...params.inputProps, }}

大写字母会完成这项工作，它会删除下划线。

在Material-ui自动完成组件上设置文本颜色，轮廓和填充

2 个答案: