Reactjs 删除TextField type=“；时间”；材料界面反应

我正在使用material ui react textField和type time，我想删除鼠标悬停和焦点右侧出现的箭头和十字

---

这取决于浏览器版本，但对于大多数最新的浏览器来说，CSS应该起作用

//remove X
input[type="time"]::-webkit-clear-button {
    display: none;
}

//remove inside of arrows button
input[type="time"]::-webkit-inner-spin-button {
  display: none;
}

//remove outsideof arrows button
input[type="time"]::-webkit-outside-spin-button {
  display: none;
}

因此，根据您的示例，您需要编辑textField样式，所以看起来是这样的

const styles = theme => ({
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200,
    "& input::-webkit-clear-button, & input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
            display: "none"
     }
  }
});

但请记住，它可能不适用于所有浏览器。例如，要删除IE10上的清除按钮，您需要使用此CSS

input[type="time"]::-ms-clear {
    display: none;
}

您可以在-webkit文档中查看支持的浏览器列表。是-webkit内部旋转按钮的一个示例，它适合我

MuiInput: {
      root: {
        "& input::-webkit-clear-button, & input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
          display: "none",
          margin: 80
        },
        "&$disabled": {
          color: palette.text.primary,
          '&:before': {
            borderBottom: 'none!important',
          },
          '& svg': {
            display: 'none',
          },
        },
      },
      underline: {
        '&:after': {
          transition: 'none',
        },
      },
    }