如何更改Slider悬停和活动的颜色;阴影"

Question

我使用的是Material UI和Styled Components。我正在努力改变滑块的颜色。我已经能够改变拇指和轨迹的颜色。但是，当鼠标悬停并点击拇指时，拇指周围会有一层蓝色的薄雾。我该如何改变这个颜色？

我已经能够使用API中提到的类对其他部分(轨迹、记号、拇指等(进行样式化(https://material-ui.com/api/slider/#css)。但不是这种阴影效应。

https://codesandbox.io/s/ecstatic-satoshi-3mzrj?file=/src/App.js

Answer 1

阴影效果也是拇指的一部分。

你可以简单地使用类似的东西

& .MuiSlider-thumb:hover {
color: red;
box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.3) !important;
}

或者，如果你不想使用!important，试着用这个类来操作它：

.MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover {
// your code here
}