Question

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

感谢您的咨询！

Answer 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" />}
/>

材质UI V4.11.0-覆盖自动完成嵌套样式

1 个答案: