Material UI Datepicker聚焦时样式不生效，如何添加focus状态box-shadow效果

解决方案 #

样式不生效的核心原因是：.MuiInputBase-root是输入框的外层容器，本身不会触发:focus伪类，实际获得焦点的是其内部的原生<input>元素。
你只需要把样式中的&:focus选择器替换为&:focus-within即可，:focus-within伪类会在容器内部任意元素获得焦点时触发。另外注意你写的边框色值#86b7f位数不足，需要补全为6位十六进制色值，示例中补为#86b7fe。
修改后的样式代码如下：

export const styles = makeStyles(() => ({
  root: {
    marginTop: 0,
    "& .MuiInputBase-root": {
      border: "1px solid grey",
      borderRadius: "0.25rem",
      padding: "0.375rem 0.75rem",
      // 替换为:focus-within实现内部元素聚焦时触发样式
      "&:focus-within": {
        borderColor: "#86b7fe",
        boxShadow: "0 0 0 0.25rem red"
      },
      "&:before": {
        borderBottom: "none"
      },
      "&:after": {
        borderBottom: "none"
      },
      "&:hover:hover:not(.Mui-disabled):before": {
        borderBottom: "none"
      },
      "& .MuiButtonBase-root": {
        padding: 0
      }
    }
  }
}));

修改后输入框聚焦时就会正常显示你需要的边框和阴影效果。

内容的提问来源于stack exchange，提问作者CCCC