Html 更改悬停时材质UI自动完成的边框颜色

我正在尝试更改悬停时

自动完成

的边框颜色，默认为黑色。我已尝试重写

.muiautomlete root

类：

.MuiAutocomplete-root fieldset:hover{
    border-color: #2196F3;
}

但它仍然是黑色的

下面是一个例子：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        );
      }}
    />
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994, },
  { title: "The Godfather", year: 1972, },
  { title: "Avatar", year: 2010, },
  // Plus a bunch more
];

---

你试过使用吗！重要的超控

.MuiAutocomplete-root fieldset:hover{
   border-color: #2196F3 !important;
}

---

我想，您可以从检查为材质元素正确添加样式开始。我发现了一个有趣的答案，与此类似：。但是如果我使用类，我怎么能使用makeStyles呢？是的，但是运气不好

.MuiAutocomplete-root fieldset:hover{
   border-color: #2196F3 !important;
}