Question

我想更改React RangeSlider的背景颜色。由于其库是通过npm安装的，因此我无法编辑CSS。有什么方法可以从npm模块导入CSS并将其用作我的自定义CSS。这是代码：

import React, { Component } from 'react'
import Slider from 'react-rangeslider'
class Horizontal extends Component {
    constructor (props, context) {
        super(props, context)
        this.state = {
            value: 850
        }
    }
    handleChangeStart = () => {
        console.log('Change event started')
    };
    handleChange = value => {
        this.setState({
            value: value
        })
    };

    handleChangeComplete = () => {
        console.log('Change event completed')
    };
    render () {
        const { value } = this.state
        return (
            <div>
                <div className='slider'  style={{ marginTop:'165px',marginLeft:'319px',width:'700px',backgroundColor:'EF5350'}} >

                    <div style={{ textAlign:'center',color:'gray',fontSize:'35px',marginBottom:'82px'}}>
                        <p> What is the size of your property?</p>
                    </div>
                    <Slider
                        min={850}
                        max={5000}
                        value={value}
                        onChangeStart={this.handleChangeStart}
                        onChange={this.handleChange}
                        onChangeComplete={this.handleChangeComplete}
                    />
                    <div className='value'>{value}</div>

                </div>
            </div>
        )
    }
}
export default Horizontal

我已使用此代码from this site

在标题部分中使用此按钮后，滑块会出现

 <link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" />

否则，即使安装了库，也不会显示滑块。甚至都没有覆盖CSS。

Answer 1

您需要重写负责背景颜色的CSS。

赞：

.rangeslider-horizontal .rangeslider__fill {
  background-color: #1e88e5
}

rangeslider__fill是滑块主要部分的类别。

这里是forked sandbox

从npm模块编辑反应范围滑块中的CSS

1 个答案: