如何更改滑块悬停和活动“阴影”的颜色

Posted 2023-03-15

【中文标题】如何更改滑块悬停和活动“阴影”的颜色

【英文标题】：How to change color of Slider hover and active "shadow"

【发布时间】：2021-08-18 13:30:43

【问题描述】：

我正在使用 Material-UI 和 Styled-Components。我正在努力改变滑块的颜色。我已经能够更改拇指和轨道的颜色。但是当悬停在拇指上并单击时，拇指周围会出现蓝色的雾霾。如何更改它的颜色？

我已经能够使用 API (https://material-ui.com/api/slider/#css) 中提到的类来设置其他部分（轨道、刻度、拇指等）的样式。但不是这种阴影效果。

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

【参考方案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

【讨论】：

啊，完美！这正是我所需要的。 :-) 我更新了滑块：codesandbox.io/s/aged-hooks-35vkq?file=/src/App.js