material-ui - 如何更改 slider 悬停和事件的颜色 "shadow"

Question

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

我已经能够使用 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
}