使用Material-UI覆盖子类样式失败，InputDate宽度修改求助

我完全懂你现在的困扰——你给InputDate组件加了自定义样式类，也用上了!important，但组件内部react-date-picker__wrapper元素自带的min-width:264px就是纹丝不动，哪怕你的类已经成功应用在最外层<div>上了。

问题出在哪？ #

你的自定义样式是加在父级<div>上的，但react-date-picker__wrapper是它的子元素。父元素的宽幅样式不会自动传递给子元素，而且子元素自身的样式选择器和你的父级样式没有优先级关联，所以你的规则根本影响不到它。

直接有效的解决方案 #

你需要在makeStyles里用后代选择器，精准定位到react-date-picker__wrapper这个子元素，把样式直接写在它身上：

const useStyles = makeStyles({
  testingWidthLimit: {
    '& .react-date-picker__wrapper': {
      width: '180px !important',
      minWidth: '180px !important',
      maxWidth: '180px !important',
    },
  },
});

const { testingWidthLimit } = useStyles();
<InputDate className={testingWidthLimit} {其他属性} />

为什么这样能行？ #

• &在makeStyles里代表当前选择器本身（也就是testingWidthLimit类），& .react-date-picker__wrapper就表示「所有带有testingWidthLimit类的元素下的react-date-picker__wrapper子元素」。
• 这种写法的选择器优先级比组件自带的.react-date-picker__wrapper更高，再加上!important，就能彻底覆盖原有的样式规则。

如果还是没生效，可以检查下组件内部有没有给react-date-picker__wrapper写内联样式（直接写在元素上的style属性），不过这种情况很少见，用上面的方法基本都能解决问题。

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