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

Question

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

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

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

标签： material-uistyled-components

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
}