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

【问题标题】：Editing the CSS in react range slider from npm module从 npm 模块编辑反应范围滑块中的 CSS
【发布时间】：2019-05-21 05:04:33
【问题描述】：

我想改变 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。

【问题讨论】：

还没有。你似乎使用了包括库在内的整个代码。我试图覆盖我代码中的 css。它仍然保持不变。
您应该使用包括库在内的整个代码，然后尝试覆盖 CSS。这就是这样做的方法。您应该通过访问 devTools 中 DOM 中的 rangeslider__fill 类来检查是否应用了自定义 CSS
我已经安装了库。在我在标题部分添加链接样式表之前，滑块不会显示。它甚至没有覆盖
你在哪里覆盖 CSS 虽然假设我想添加 className='custom' 这将改变填充颜色所以我的 css 将是这样的 .custom .rangeslider-horizontal .rangeslider__fill { background-color: #1e88e5 } 但是我在哪里添加这个到滑块附带的 index.css？我试过了，没用？？

标签： reactjs rangeslider

【解决方案1】：

您需要覆盖负责背景颜色的 CSS。

像这样：

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

其中rangeslider__fill 是滑块主要部分的类。

这是forked sandbox

【讨论】：

你在哪里覆盖 CSS 虽然假设我想添加 className='custom' 这将改变填充颜色，所以我的 CSS 将是这样的 .custom .rangeslider-horizontal .rangeslider__fill { background -color: #1e88e5 } 但是我在哪里将它添加到滑块附带的 index.css 中？我试过了，没有用？？