为何无法通过className为React-datetime组件应用CSS样式？

嘿，我完全懂你的困惑！你遇到的问题其实是React-Datetime组件的DOM结构导致的——你通过className='datetime'添加的样式是作用在组件的外层容器上，但真正需要设置border-radius的是组件内部的<input>元素，所以你的样式根本没命中目标~

为什么会这样？ #

React-Datetime的渲染结构大概是这样的（简化版）：

<div class="datetime"> <!-- 你加的className在这里 -->
  <div class="rdt">
    <input class="rdtInput" /> <!-- 真正带边框的是这个元素 -->
  </div>
</div>

你的.datetime { border-radius: 5px; }样式只会给外层div加圆角，但这个div本身没有边框，所以看起来完全没效果。

三种可行的解决方案： #

1. 使用CSS深度选择器穿透到内部元素

如果你的项目用了CSS预处理器（比如Less/Sass）或者React的CSS Modules，用深度选择器可以穿透组件的封装，直接给内部input加样式：

/* 适用于CSS Modules或React的scoped样式 */
.datetime :deep(input) {
  border-radius: 5px;
}

/* 如果是原生CSS或者Less，也可以用::v-deep */
.datetime ::v-deep input {
  border-radius: 5px;
}

2. 直接覆盖组件自带的类名

React-Datetime给内部input元素自带了rdtInput类名，你可以直接针对这个类写样式：

.rdtInput {
  border-radius: 5px;
  /* 如果组件自带样式优先级更高，加!important强制覆盖 */
  /* border-radius: 5px !important; */
}

3. 通过组件的inputProps直接设置内联样式

这是最直接的方式，组件提供了inputProps属性，可以把样式直接传给内部的input元素：

import ReactDateTime from 'react-datetime';

// 直接给input加内联样式
<ReactDateTime inputProps={{ style: { borderRadius: '5px' } }} />

这样就能轻松给输入框加上圆角啦！

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