如何移除react日期范围选择器中非.css定义的rangeButton0元素

站点基于react-advanced-datetimerange-picker库实现时间范围选择功能，现需要自定义组件样式，移除显示Custom Range文字的按钮及对应蓝色背景。排查DOM结构发现该按钮类名为rangeButton0，但在库官方提供的CSS文件中未检索到该类的定义，无明确的移除实现思路。

按推荐优先级从高到低排列：

• 方案1：通过组件内置属性关闭渲染（最优）
  该类是组件运行时动态生成的，所以不会出现在官方静态CSS文件中。库本身提供了控制该按钮显隐的API，直接传入showCustomRangeLabel={false}即可从根源上不渲染该按钮，不会残留多余样式或DOM节点，示例代码：

  import DateTimeRangePicker from 'react-advanced-datetimerange-picker';
  
  function TimeRangeSelector() {
    // 其余业务逻辑，比如值管理、事件回调
    return (
      <DateTimeRangePicker
        /* 其余业务props，比如value、onChange、ranges等 */
        showCustomRangeLabel={false}
      />
    )
  }
  

• 方案2：CSS强制覆盖隐藏（兼容性最好）
  如果使用的库版本较低、没有上述属性，可以直接通过高优先级CSS样式隐藏元素，同时清除对应蓝色背景。如果项目使用CSS Module，需要将相关选择器包裹在:global()作用域下避免被编译哈希，示例代码：

  /* 非CSS Module场景可直接写 */
  .rangeButton0 {
    display: none !important;
  }
  /* 清除按钮父容器的选中态蓝色背景 */
  .react-datetimerange-picker .ranges li:has(.rangeButton0) {
    background-color: transparent;
  }
  

• 方案3：DOM操作兜底移除
  若上述两种方案都受项目环境限制无法生效，可以在组件挂载完成后直接操作DOM移除对应节点，注意要在组件每次重新渲染后做一次检查，避免动态渲染时节点重新出现：

  import { useEffect } from 'react';
  
  function TimeRangeSelector() {
    useEffect(() => {
      const removeCustomBtn = () => {
        const btn = document.querySelector('.rangeButton0');
        if (!btn) return;
        btn.remove();
        // 移除父级选中态
        const parentLi = btn.closest('li');
        parentLi?.classList.remove('active');
      };
      removeCustomBtn();
      // 如果组件有动态展开/收起逻辑，可以把移除方法绑定到对应展开事件上
    }, [/* 这里传入组件控制显隐、值变化的相关依赖，保证更新时重新执行 */])
  
    return <DateTimeRangePicker {/* 其余props */} />
  }
  

注意：不推荐直接修改node_modules里的库源码，后续依赖安装、版本升级时修改会直接丢失。

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