Material UI - 自动完成样式

Posted 2023-02-22

【中文标题】Material UI - 自动完成样式

【英文标题】：Material UI - Autocomplete Styling

【发布时间】：2020-07-30 01:45:01

【问题描述】：

我正在尝试设置填充样式，以便在当前被此样式覆盖的 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
          />
        );
      
    />
  );

结果如下：

【参考方案1】：

您正在为Input 指定endAdornment，但是Autocomplete also tries to specify the endAdornment。您的 endAdornment 获胜，但 Autocomplete 仍在尝试应用与其末端装饰相关的所有 CSS（弹出图标和清除图标的空间）。

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

    <Autocomplete
      disableClearable
      forcePopupIcon=false

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

【讨论】：

谢谢！我传入了 ="false" 这就是为什么这不起作用

有趣。相同代码的 v5 升级后出现此问题。

@Kerematam 我添加了一个 v5 代码沙箱。

@RyanCogswell 非常感谢您抽出宝贵时间！我的意思是一般的这个问题，当我升级到 v5 时突然出现，你的回答解决了它。