如何自定义修改react-bootstrap-range-slider的滑块颜色？

现有组件代码 #

return (
  <div style={divStyles}>
      <Row style={{"justifyContent": "center"}}>
          <Col xs={2}>
              { title }
          </Col>
          <Col xs={2}>
              <RangeSlider variant="primary" value={value} onChange={e => setValue(+e.target.value)} min={minLimit} max={maxLimit}></RangeSlider>
          </Col>
          <Col xs={1}>
              <TextField
                      label={title} variant="standard"
                      value={ value }
                      type="number"
                      onChange={e => setValueWithLimit(+e.target.value)}
                  />
          </Col>
          <Col xs={2}>
              { renderDays() }
          </Col>
      </Row>
  </div>
)

问题说明 #

当前滑块默认配色为蓝色，组件内置的variant属性提供的所有预设配色均不包含目标自定义颜色，无法通过切换variant实现配色修改，以下为3种可直接落地的修改方案：

方案1：组件样式属性直接配置（单组件快速修改） #

绝大多数滑块组件都暴露了轨道、滑块、选中区域的单独样式配置入口，不需要依赖预设variant，直接给组件传入对应样式props即可，修改后代码示例：

<RangeSlider 
  value={value} 
  onChange={e => setValue(+e.target.value)} 
  min={minLimit} 
  max={maxLimit}
  // 删除原有variant="primary"配置，新增以下自定义样式，色值替换为你的目标颜色即可
  railStyle={{ backgroundColor: '#f0f0f0' }} // 未选中的滑轨底色
  trackStyle={{ backgroundColor: '#你的目标色值' }} // 选中区域的滑轨颜色
  thumbStyle={{ backgroundColor: '#你的目标色值', border: '2px solid #fff' }} // 拖拽滑块的颜色
/>

方案2：CSS选择器覆盖（适合复杂场景定制） #

如果所用组件没有暴露样式配置props，可以通过类名穿透的方式覆盖内置样式：

• 先给滑块组件加自定义类名

<RangeSlider 
  className="custom-slider"
  variant="primary" 
  value={value} 
  onChange={e => setValue(+e.target.value)} 
  min={minLimit} 
  max={maxLimit}
/>

• 编写CSS样式覆盖默认规则，若使用CSS Modules需要对组件类名加:global做穿透，选择器可通过浏览器开发者工具选中滑块元素后，直接复制渲染出的DOM类名：

.custom-slider .slider-track {
  background-color: #你的目标色值 !important;
}
.custom-slider .slider-thumb {
  background-color: #你的目标色值 !important;
  border: none;
}

样式规则后加!important是为了覆盖组件内置的高优先级默认样式，调试时如果样式不生效优先检查选择器是否匹配到对应DOM节点。

方案3：全局主题配置修改（适合全项目统一配色） #

如果项目内所有滑块都需要替换为该自定义颜色，可以直接修改项目引入的组件库主题变量，找到主题配置中对应主色（primary）的色值变量，替换为目标自定义色值即可，一次修改全项目所有依赖主色的组件都会同步更新，不需要单独给每个滑块加样式。

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