反应滑块无法正确呈现

Question

我想为我的项目使用rc-slider。 我想显示不同的价格。 应该是这样的：

但是当我尝试为我的网站实现滑块时，它看起来像这样：

这是我的滑块代码。

<div className="rc-slider rc-slider-with-marks">
                        <div className="rc-slider-rail" style={{backgroundColor: 'rgb(216, 216, 216)', height: 6}} />
                        <div className="rc-slider-track" style={{backgroundImage: 'linear-gradient(91deg, rgb(13, 119, 243), rgb(14, 126, 243))', height: 6, left: '0%', width: '0%'}} />
                        <div className="rc-slider-step"><span className="rc-slider-dot rc-slider-dot-active" style={{left: '0%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(27, 124, 239)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '14.2857%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '28.5714%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '42.8571%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '57.1429%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '71.4286%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '85.7143%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '100%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /></div>
                        <div role="slider" tabIndex={0} aria-valuemin={10} aria-valuemax={80} aria-valuenow={10} aria-disabled="false" className="rc-slider-handle" style={{borderColor: 'rgb(27, 124, 239)', borderWidth: 7, marginTop: '-6px', height: 18, width: 18, backgroundColor: 'rgb(255, 255, 255)', left: '0%'}} />
                        <div className="rc-slider-mark"><span className="rc-slider-mark-text rc-slider-mark-text-active" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '0%'}}>25K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '14.2857%'}}>50K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '28.5714%'}}>100K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '42.8571%'}}>250K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '57.1429%'}}>500K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '71.4286%'}}>1M</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '85.7143%'}}>3M</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '100%'}}>5M</span></div>
                      </div>

这是我的滑块CSS。

.view-container .upper-info .pricing-content-wrap .rc-slider {
  margin-bottom: 45px;
}
.view-container
  .upper-info
  .pricing-content-wrap
  .rc-slider
  .rc-slider-mark-text {
  bottom: -47px;
  color: #a4a4a4;
}

Answer 1

似乎您忘记了import rc-slider CSS。

import 'rc-slider/assets/index.css'

我尝试重现您的问题here，并且删除此CSS导入会导致您的行为受到破坏。
否则，没关系。

---

另外，请注意，使用内联样式stye={{ prop: value, etc... }}并不是一种好习惯，请考虑将其移至CSS并仅在JSX中使用类名进行操作。

要改进的另一件事是样板标记。您可以使用map来减少代码量：

const marks = ['50K', '100K', '250K']

// in render
<div className="slider-rail">
  {marks.map(m => <SliderDot key={m} />)}
</div>
<div className="slider-handle">
  {marks.map(m => <SliderMark key={m} label={m} />)}
</div>

// SliderDot
const SliderDot = () =>
  <span
    className="rc-slider-dot"
    style={{
     left: '85.7143%',
     width: 10,
     height: 10,
     border: 'none',
     backgroundColor: 'rgb(216, 216, 216)',
     bottom: '-4px',
    }}
  />

// SliderMark
const SliderMark = ({ label }) =>
  <span
    className="rc-slider-mark-text"
    style={{width: '12.8571%', marginLeft: '-6.42857%', left: '100%'}}
  >
    {label}
  </span>