Material UI 自动完成样式

Question

我更改了 MUI 自动完成样式以根据需要对其进行自定义。一切正常，直到我将 disableClearable={true} 添加为 prop 。样式以某种方式重置为默认值。

               <Autocomplete
                className={classes.dropdown}
                options={someRandomOptions}
                getOptionLabel={(option) => option.label}
                renderInput={(params) => (
                  <TextField {...params} variant="outlined" />
                )}
                defaultValue={{ value: 7, label: "7 days" }}
                size="small"
              />

我正在使用 makeStyles() 应用 class，这是我正在使用的对象：

dropdown: {
    "&.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot":
      {
        padding: "0px !important",
        fontSize: "14px",
        color: "#1E5EF3",
        fontWeight: 500,
      },
    "& .MuiAutocomplete-endAdornment": {
      right: "0px !important",
    },
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "#1E5EF3",
    },
  },

如果我将 disableClearable 添加为 true，则不会应用这些样式。我正在使用 MUI v4。参考这个 link 通过取消注释 prop 来查看问题。

沙盒 link : https://codesandbox.io/s/wild-paper-77bnvc?fontsize=14&hidenavigation=1&theme=dark&file=/src/DropDown.js

Answer 1

因为您使用的是 MuiAutocomplete-hasClearIcon class 名称，但是 MuiAutocomplete-hasClearIcon 仅在呈现清除图标时应用。
来自 Mui 文档：

hasClearIcon .MuiAutocomplete-hasClearIcon Styles applied when the clear icon is rendered.

如果你想使用根class名字，使用.MuiAutocomplete-root

const useStyles = makeStyles(() => ({
  dropdown: {
    "&.MuiAutocomplete-root .MuiAutocomplete-inputRoot": {
      padding: "0px !important",
      fontSize: "14px",
      color: "#1E5EF3",
      fontWeight: 500
    },
    ...
  }
}));

您可以查看 Mui AutoComplete class 文档中的名称：
https://mui.com/material-ui/api/autocomplete/#css

Answer 2

发生这种情况是因为您还使用了 .MuiAutocomplete-hasClearIcon。当您执行 disableClearable={true} 时，清除图标未呈现且 class 未应用。 要解决此问题，只需从您的自定义 css.like 中删除此 class .MuiAutocomplete-hasClearIcon this:

dropdown: {
    "&.MuiAutocomplete-hasPopupIcon .MuiAutocomplete-inputRoot":
      {
        padding: "0px !important",
        fontSize: "14px",
        color: "#1E5EF3",
        fontWeight: 500,
      },
    "& .MuiAutocomplete-endAdornment": {
      right: "0px !important",
    },
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "#1E5EF3",
    },
  },

Material UI 自动完成样式

Material UI Autocomplete Styles

reactjs

material-ui