如何使用CSS Modules为react-datepicker添加自定义样式？样式未生效问题排查

我明白你遇到的问题了——明明加了!important，自定义样式却完全没作用到输入框上，这确实挺让人困惑的。

问题根源 #

React DatePicker组件的结构里，你通过className属性添加的类名，是作用在组件的外层容器div上，而不是内部实际的<input>元素。你的.custom-input样式规则是给外层容器设置的，自然不会影响到里面的输入框，哪怕加了!important也没用——因为样式根本没应用到目标元素上。

两种解决方案 #

方案1：直接给内部input添加类名（推荐）

DatePicker组件提供了inputProps属性，可以直接给内部的input元素传递属性，包括类名：

<DatePicker inputProps={{ className: s["custom-input"] }} />

这样你的.custom-input样式就直接作用在input上了，甚至可以去掉!important（除非组件自带样式优先级特别高，不过通常不需要）。

方案2：通过外层容器选择内部input

如果你想保留给外层容器加类的方式，可以用CSS Modules的后代选择器，选中容器内部的input元素：

.custom-input input {
    border-radius: 10px;
    padding: 5px 10px 5px 30px;
    border: 2px solid #cccccc;
    font-size: 16px;
    line-height: 26px;
}

然后继续使用<DatePicker className={s["custom-input"]}/>，这样样式就会穿透到内部的input元素上。

补充说明 #

以后遇到这类组件样式不生效的问题，建议先打开浏览器的开发者工具，查看元素的DOM结构，确认你的类名到底加在了哪个元素上，以及目标元素的样式来源——这样能快速定位问题所在。

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