Question

我正在尝试覆盖react range滑块的CSS。它使用需要在头部添加的自定义样式表。我的项目基于next.js

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

否则，即使我安装了库，如果我没有在头部添加链接，滑块也不会显示任何内容。它甚至没有覆盖CSS。我想更改背景颜色。这是我的代码：

import React, { Component } from 'react'
import 'react-rangeslider/lib/index.css';
import './slider.css';
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

我试图更改slide.css中的背景颜色。

.rangeslider-horizontal .rangeslider__fill {
    background-color: red;
}

该库需要首先安装：

npm install react-rangeslider --save

Answer 1

它不起作用，因为滑块样式表会覆盖您的样式表。包括这样的样式

// To include the default styles
import 'react-rangeslider/lib/index.css'
// import your css
import './style.css';

Demo

Answer 2

始终使您自己的CSS样式表文件成为任何其他CSS样式表文件之后要导入的最后一个文件，以覆盖所需的内容否则，您始终可以使用浏览器中的控制台通过按浏览器中的F12键自动检测任何错误，然后转到名为（控制台）的标签

我认为您可以设置要驻留在控制台中的元素的样式，以了解如何嵌套元素的详细信息

您还可以在编辑器中打开CSS文件，然后按Ctrl + F，然后找到要设置样式的代码行，然后将其属性和值复制到自己的CSS文件中，然后就可以如此轻松地进行编辑

无法覆盖自定义样式表

2 个答案: