Material ui MUIv5自动完成：如何在不重复名称的情况下以子类为目标？

以下是MUI v5

我有一个带有复选框的MUI自动完成组件：

<div className="App">
      <ThemeProvider theme={globalTheme}>
        <CssBaseline />
        <Autocomplete
          multiple
          limitTags={2}
          id="checkboxes-filter-bu"
          options={options.sort(
            (a, b) => -b.firstLetter.localeCompare(a.firstLetter)
          )}
          groupBy={(option) => option.category}
          disableCloseOnSelect
          getOptionLabel={(option) => option.title}
          renderOption={(props, option, { selected }) => (
            <ListItem {...props}>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.title}
            </ListItem>
          )}
          style={{ width: 500 }}
          renderInput={(params) => (
            <TextField
              {...params}
              variant="outlined"
              label=""
              placeholder="Search"
            />
          )}
          PaperComponent={({ children }) => (
            <Card>
              {children}
              <Button
                color="secondary"
                variant="contained"
                type="button"
                style={{ margin: "10px", padding: "5px" }}
                onMouseDown={() => alert("clicked")}
              >
                Apply
              </Button>
            </Card>
          )}
        />
      </ThemeProvider>
    </div>

我在检查元素后进行了上述定制：

我的问题如下：

（1） 如何重构自定义主题以减少冗余？ 例如，在主题文件中，我有以下几行：

  MuiAutocomplete: {
      styleOverrides: {
        listbox: {
          '.MuiAutocomplete-option[aria-selected="true"]': {
            backgroundColor: "red"
          },
          '.MuiAutocomplete-option[aria-selected="true"].Mui-focused': {
            backgroundColor: "red"
          }
        }
      }
    }

我认为有一种更好的方法，而不是重复类名

.muiautomlete选项[aria selected=“true”]

，因为

选项

已经在类

muiautomlete

中，但我不确定如何重构它

（2） 第二，当鼠标悬停在未选中的选项上时，我的目标是：

'.MuiAutocomplete-option[aria-selected="false"].Mui-focused': ..

在不使用

[aria selected=“false”]

的情况下，是否有更好的方法来执行此操作

代码沙盒链接：

'.MuiAutocomplete-option[aria-selected="false"].Mui-focused': ..