如何修改rc-slider range组件激活状态下手柄的box-shadow样式？

方法一：内联样式（直接生效） #

rc-slider提供了activeHandleStyle属性专门设置手柄激活状态的样式，和你用的handleStyle用法一致——单个手柄传对象，range模式下可以传单个对象（统一样式）或者数组（分别设置两个手柄的激活样式）。

示例代码：

import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

export default function RangeSlider() {
  return (
    <Slider
      range
      min={0}
      max={100}
      defaultValue={[20, 80]}
      // 普通手柄样式
      handleStyle={[{ borderColor: "#3643BA" }, { borderColor: "#3643BA" }]}
      // 激活状态手柄样式（自定义box-shadow）
      activeHandleStyle={{ boxShadow: '0 0 0 2px #3643BA' }}
    />
  );
}

如果需要给两个手柄设置不同的激活样式，也可以传数组：activeHandleStyle={[{ boxShadow: '0 0 0 2px #3643BA' }, { boxShadow: '0 0 0 2px #1296DB' }]}

方法二：CSS类选择器解决优先级问题 #

常规CSS没生效大概率是因为rc-slider的默认样式优先级比你的自定义样式高。激活手柄的类名是rc-slider-handle-active，你可以通过提升选择器优先级来覆盖默认样式。

示例CSS：

/* 直接覆盖激活状态的box-shadow，优先级不够时加!important */
.rc-slider-handle.rc-slider-handle-active {
  box-shadow: 0 0 0 2px #3643BA !important;
}

不想用!important的话，给Slider外层加自定义类名来提升优先级：

.my-custom-slider .rc-slider-handle.rc-slider-handle-active {
  box-shadow: 0 0 0 2px #3643BA;
}

对应的JSX结构：

<div className="my-custom-slider">
  <Slider range ... />
</div>

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