Редактирование CSS в ползунке диапазона реагирования из модуля npm

Я хочу изменить цвет фона React RangeSlider. Поскольку его библиотека установлена ​​через npm, я не могу редактировать CSS. Есть ли способ импортировать CSS из модуля npm и использовать его в качестве моего настроенного 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
        }
    }
    handleChangeEventStart = () => {
        console.info('Change event started')
    };
    handleChangeEvent = value => {
        this.setState({
            value: value
        })
    };

    handleChangeEventComplete = () => {
        console.info('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.handleChangeEventStart}
                        onChange = {this.handleChangeEvent}
                        onChangeComplete = {this.handleChangeEventComplete}
                    />
                    <div className='value'>{value}</div>

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

Я взял этот код с этого сайта

Ползунок появляется после того, как я использовал его в разделе заголовка

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

В противном случае ползунок не отображается, хотя я установил библиотеку. Это даже не перезапись CSS.

еще нет. Похоже, вы использовали весь код, включая библиотеку. Я пытался переопределить CSS в своем коде. Он все еще остается прежним.

ariful Islam 22.05.2019 06:17

Вы должны использовать весь код, включая библиотеку, а затем попытаться переопределить CSS. Вот как это сделать. Вы должны проверить, применяется ли пользовательский CSS или нет, посетив класс rangeslider__fill в DOM в devTools.

tanmay 22.05.2019 09:19

Я установил библиотеку. Ползунок не отображается, пока я не добавлю таблицу стилей ссылки в раздел заголовка. Он даже не перезаписывается.

ariful Islam 25.05.2019 06:01

где вы переопределяете CSS, хотя давайте предположим, что я хочу добавить className='custom', который изменит цвет заливки, поэтому мой css будет примерно таким .custom .rangeslider-horizontal .rangeslider__fill { background-color: #1e88e5 }, но тогда где я могу добавить это в index.css, который идет с ползунком? я пробовал так и не получилось??

Lamis Abouzina 13.01.2020 15:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
4
1 714
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно переопределить CSS, отвечающий за цвет фона.

Так:

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

Где rangeslider__fill — класс основной части слайдера.

Вот раздвоенная песочница

где вы переопределяете CSS, хотя давайте предположим, что я хочу добавить className='custom', который изменит цвет заливки, поэтому мой css будет примерно таким .custom .rangeslider-horizontal .rangeslider__fill { background-color: #1e88e5 }, но затем где мне добавить это в index.css, поставляемый с ползунком? я пробовал так и не получилось??

Lamis Abouzina 13.01.2020 15:55

Другие вопросы по теме