reactjs - 从 npm 模块编辑反应范围滑块中的 CSS
问题描述
我想更改 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
在标题部分使用此滑块后,滑块显示
<link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" />
否则,即使我安装了库,滑块也不会显示。它甚至没有覆盖 CSS。
解决方案
您需要覆盖负责背景颜色的 CSS。
像这样:
.rangeslider-horizontal .rangeslider__fill {
background-color: #1e88e5
}
rangeslider__fill
滑块主要部分的类在哪里。
这是一个分叉的沙箱
推荐阅读
- python - Ultra96 硬件提升/超频
- excel - 如何将具有相同日期的多个单元格从一个工作表粘贴到另一个工作表?
- terraform - 从 terraform rt 53 解析器获取特定输出
- java - java:无法访问 com.google.auth.Credentials 类文件,因为找不到 com.google.auth.Credentials?
- conv-neural-network - 卷积中的偏差
- service - 服务启动 gunicorn 失败并显示“启动请求重复太快”
- azure-databricks - 使用 Hyperopt 禁用自动记录标签到 MLflow
- ios - 如何将 json 解码为 Codable 以在 SwiftUI 预览中使用?
- sql - 使用 SSIS 表达式将全名分解为单独的字段,最后一个中间
- javascript - 如何在队列中播放音频 TTS?