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

Question

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

我看到你需要将handle道具传递给带有css的滑块和带偏移和值道具的某种组件。当我尝试这样做时，我的CSS回来可怕，旋钮没有移动，滑块遍布整个地方。常规样式在滑块上不起作用。

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

从“反应”中导入React;

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

查看滑块给出的关于创建自定义句柄的示例 - http://react-component.github.io/slider/examples/custom-handles.html - 首先我要解释句柄对象。这只会替换滑块中的手柄..我认为你称之为＆＃34;旋钮＆＃34;。这不会改变整个滑块的样式（您应该使用Slider的className prop来更改非句柄滑块样式）。

此外，您需要了解传递给句柄组件的偏移量和值道具。需要偏移支柱来确定手柄需要的百分比。不使用它，您的手柄将不会移动，这似乎是您目前正在经历的。应显示值prop以向用户显示滑块当前所处的值（即10个中的3个）。例如：

＆＃13;

＆＃13;

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>
    )
  }
}

＆＃13;

＆＃13;

＆＃13;

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