Я хочу изменить цвет фона 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. Вот как это сделать. Вы должны проверить, применяется ли пользовательский CSS или нет, посетив класс rangeslider__fill в DOM в devTools.
Я установил библиотеку. Ползунок не отображается, пока я не добавлю таблицу стилей ссылки в раздел заголовка. Он даже не перезаписывается.
где вы переопределяете CSS, хотя давайте предположим, что я хочу добавить className='custom', который изменит цвет заливки, поэтому мой css будет примерно таким .custom .rangeslider-horizontal .rangeslider__fill { background-color: #1e88e5 }, но тогда где я могу добавить это в index.css, который идет с ползунком? я пробовал так и не получилось??





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