无法弄清楚如何通过内联样式设置 rc-slider （React Component Slider）的样式

Question

我已经多次阅读文档，但仍然不完全理解如何通过内联 CSS 设计 React 滑块的样式（https://github.com/react-component/slider）。

我发现您需要handle使用 css 和某种带有偏移和值属性的组件将属性传递给滑块。当我尝试这样做时，我的 CSS 变得很糟糕，旋钮不动，滑块到处都是。常规样式在滑块上不起作用。

这就是我传递给滑块组件的组件的样子：

从“反应”导入反应；

export default class SliderStyle extends React.Component {
  render(){
    let style = {
      position: "absolute",
      left: "0",
      height: "15px",
      borderRadius: "8px",
      backgroundColor: "#000"
    };

    let tracker = {
      position: "absolute",
      marginLeft: "-7px",
      marginTop: "-5px",
      width: "14px",
      height: "14px",
      cursor: "pointer",
      borderRadius: "50%",
      border: "solid 2px #000",
      backgroundColor: "#fff"
    }


    return(
      <div style={style}><div style={tracker}></div></div>
    )
  }
}

然后在主要组件中：

<Slider range allowCross={false} handle={<SliderStyle/>} value={this.state.range} onChange={this.onSliderChange.bind(this)}/>

我假设从传递到 Slider 组件的组件返回的 div 是实际的滑块，第一个滑块内的 div 是旋钮。颜色发生变化，但当值发生变化时滑块旋钮不会移动。

有什么我没能到达的地方吗？

Answer 1

查看 slider 给出的关于创建自定义句柄的示例 - http://react-component.github.io/slider/?path=/story/rc-slider--slider - 首先我想解释一下句柄对象。这只会替换滑块中的手柄..我认为您称之为“旋钮”。这不会更改整个滑块的样式（您应该使用 Slider 的 className 属性来更改非手柄滑块样式）。

此外，您还需要了解传递给句柄组件的 offset 和 value 属性。需要使用 offset 属性来确定手柄需要离开的百分比。如果不使用这个，你的手柄将不会移动，这似乎就是你目前所经历的。应显示 value 属性以向用户显示滑块当前的值（即 10 中的 3）。例如：

const handle = {
  position: "absolute",
  transform: 'translate(-50%, -50%)',
  width: "14px",
  height: "14px",
  cursor: "pointer",
  borderRadius: "50%",
  border: "solid 2px #000",
  backgroundColor: "#fff"
};

const valueBubble = {
  position: "absolute",
  top: "-10px",
  fontSize: "14px"
};

export default class Handle extends React.Component {
  render(){
    const handleStyle = Object.assign({ left: `${this.props.offset}%` }, handle);
    
    return(
      <div style={handleStyle}>
        <div style={valueBubble}>{this.props.value}</div>
      </div>
    )
  }
}

我还没有运行这段代码，但这应该会产生类似圆形手柄的东西，上面有一个气泡，保存滑块的当前值。