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

Question

我想更改 React RangeSlider 的 background-color。由于它的库是通过 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

我在 header 部分使用它后出现滑块

 <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是滑块主要部分的class。

这是一个forked sandbox

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

Editing the CSS in react range slider from npm module

reactjs

rangeslider