Reactjs 材质UI V4.11.0-替代自动完成嵌套样式

实际上，我正在尝试覆盖autocomplete组件的输入样式，我已经覆盖了主题上的一些样式，但是我无法覆盖输入下划线的样式来删除它，在devtools上，我发现我必须删除borderBottom和内容样式，但由于这是一种嵌套样式，所以我尝试过的方法没有奏效：

实际行为

期望的行为

这就是我需要的

这些样式正在工作：

MuiAutocomplete: {
      root: {
        paddingLeft: "15px",
        paddingRight: "15px",
      },
      groupLabel: {
        fontWeight: 700,
        color: "black",
        fontSize: 14
      },
      option: {
        paddingTop: "0px",
        paddingBottom: "0px",
        fontSize: 14,
        height: "25px"
      }
    }

我试过这样的方法：

    MuiAutocomplete: {
      input: {
        content: "",
        borderBottom: "none"
      },
      inputFocused: {
        content: "",
        borderBottom: "none"
      },
      inputRoot: {
        content: "",
        borderBottom: "none"
      },
      root: {
        paddingLeft: "15px",
        paddingRight: "15px",
      },
      groupLabel: {
        fontWeight: 700,
        color: "black",
        fontSize: 14
      },
      option: {
        paddingTop: "0px",
        paddingBottom: "0px",
        fontSize: 14,
        height: "25px"
      }
    }

还尝试将makeStyles与inputRoot、input和inputFocused一起使用，但未成功：

const useStyles = makeStyles(theme => ({
  inputRoot: {
    "& .MuiInput-underline": {
      content: "",
      borderButton: "none"
    },
    "&:before .MuiInput-underline": {
      content: "",
      borderButton: "none"
    },
    "&.after ..MuiInput-underline": {
      content: "",
      borderButton: "none"
    }
  }
}));

---

谢谢你的建议

该下划线是

MuiInput underline

的伪元素，而不是根输入。此外，伪元素不能有子元素，因此这种

&:before.MuiInput underline

类型的语法将不起作用

要解决这个问题：只需引用生成的根类，它的后代应该是

。muiInputUnderline

，前面是伪元素

const useStyles = makeStyles(theme => ({
  inputRoot: {
    "& .MuiInput-underline:before": {
      borderBottom: "none"
    }
  }
}));

<Autocomplete
  renderInput={(params) => <TextField classes={{root: classes.inputRoot}} {...params} label="Combo box" />}
/>

const useStyles=makeStyles（主题=>({
输入根：{
“&.MuiInput下划线：之前”：{
borderBottom：“无”
}
}
}));
}
/>
这正是我想要的，非常感谢！