Can someone please explain to me how I can use the activated class to change the style of the thumb and hide its shadows?
According to the official website, the activated class is applied to the track and thumb elements to trigger JSS nested styles when activated.
This is my code snippet:
const style={
thumb:{
bottom:15,
'&$focused, &:hover':{
boxShadow: `0px 0px 0px 0px`,
},
},activated:{
boxShadow: `0px 0px 0px 0px`
},
}
...
<Slider
value={value}
aria-labelledby="slider-image"
onChange={this.handleChange}
max='10'
step='1'
classes={{
container: classes.slider,
track:classes.track,
thumb:classes.thumb,
focused:classes.focused,
trackBefore:classes.trackBefore,
trackAfter:classes.trackAfter,
activated:classes.activated
}}
thumb={
<Thumb num={value}/>
}
...