如何在React中覆盖DateTimePicker NPM包的CSS类？

完全可以覆盖NPM包的内置CSS样式，针对你遇到的边框问题，给你几种实用的解决方法：

方法1：利用组件自带的自定义类名属性（推荐） #

react-datetime-picker 提供了 wrapperClassName 属性，允许你为内部的.react-datetime-picker__wrapper容器指定自定义类名，直接在自己的样式文件中修改即可，无需使用!important：

1. 给DateTimePicker添加自定义类名：

<DateTimePicker
  onChange={onChange}
  value={value ? new Date(value) : null}
  wrapperClassName="custom-datetime-wrapper"
/>

2. 在你的自定义CSS文件中写入：

.custom-datetime-wrapper {
    border: none;
}

方法2：提高选择器优先级 #

如果不想用组件自带属性，也可以通过更具体的CSS选择器来覆盖原有样式，确保你的样式文件在包的样式之后导入：

1. 在外层容器添加自定义类：

<div className="calendar-container">
  <Controller
    control={control}
    name='start_time'
    defaultValue={new Date()}
    render={({ field: { onChange, value } }) => (
      <DateTimePicker
        onChange={onChange}
        value={value ? new Date(value) : null}
      />
    )}
  />
</div>

2. 自定义样式：

.calendar-container .react-datetime-picker__wrapper {
    border: none;
}

方法3：使用!important强制覆盖（不推荐，万不得已时用） #

如果上面的方法都不生效，可以用!important强制覆盖原有样式，但这会降低样式的可维护性，尽量少用：

.react-datetime-picker__wrapper {
    border: none !important;
}

注意事项 #

确保你的自定义CSS文件是在导入包的样式之后引入的，这样优先级才会更高：

import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'
import './your-custom-styles.css' // 自己的样式放在最后

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