Material UI V4.11.0 - 覆盖自动完成嵌套样式答案

【问题标题】：Material UI V4.11.0 - Override Autocomplete nested stylesMaterial UI V4.11.0 - 覆盖自动完成嵌套样式
【发布时间】：2020-10-08 23:44:51
【问题描述】：

我实际上是在尝试覆盖自动完成组件的输入样式，我已经覆盖了主题上的一些样式，但是我无法在 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"
    }
  }
}));

感谢您的建议！

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

该下划线是MuiInput-underline 的伪元素，而不是根输入。此外，伪元素不能有子元素，因此这种&:before .MuiInput-underline 类型的语法不起作用

解决这个问题：只引用生成的根类，它的后代应该是.MuiInput-underline，伪元素before

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

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

【讨论】：

这正是我想要的，非常感谢！