reactjs - Material UI - 自动完成样式

Question

我正在尝试设置填充样式，以便在当前被此样式覆盖的 AutoComplete Material UI 组件中将图标推到最右侧：

.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]

这是代码：

const useStyles = makeStyles(theme => ({
  inputRoot: {
    color: "blue",
    fontFamily: "Roboto Mono",
    backgroundColor: fade("#f2f2f2", 0.05),
    "& .MuiOutlinedInput-notchedOutline": {
      borderWidth: '2px',
      borderColor: "blue"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderWidth: "2px",
      borderColor: "blue"
    }
  }
}));

const textStyles = makeStyles({
  formControlRoot: {
    fontFamily: "Roboto Mono",
    width: "50vw",
    color: "#ffffff",
    borderRadius: "7px",
    position: "relative",
    "& label.Mui-focused": {
      color: "blue"
    },
  },
  inputLabelRoot: {
    color: "#ffffff",
    fontFamily: "Roboto Mono",
    "&.focused": {
      color: "#ffffff"
    }
  },
});

export default function ComboBox() {
  const classes = useStyles();
  const textClasses = textStyles();

  return (
    <Autocomplete
      id="combo-box-demo"
      classes={classes}
      // options={top100Films}
      getOptionLabel={option => option.title}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            classes={{ root: textClasses.formControlRoot }}
            fullWidth
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <InputAdornment position="end">
                  <SearchIcon />
                </InputAdornment>
              )
            }}
            InputLabelProps={{ classes: {root: textClasses.inputLabelRoot}}}
          />
        );
      }}
    />
  );
}

这是结果：

标签： reactjsautocompletematerial-uitextfieldstyling

Answer 1

您正在为 指定endAdornment，Input但Autocomplete 也尝试指定 endAdornment。你endAdornment赢了，但Autocomplete仍在尝试应用与其最终装饰相关的所有 CSS（弹出图标和清除图标的空间）。

您可以通过传递关闭这些功能的道具来关闭与自动完成的结束装饰相关的 CSS：

    <Autocomplete
      disableClearable
      forcePopupIcon={false}

• v4 CodeSandbox：https ://codesandbox.io/s/autocomplete-with-custom-endadornment-86c87?file=/src/App.js
• v5 CodeSandbox：https ://codesandbox.io/s/autocomplete-with-custom-endadornment-euzor?file=/src/App.js