如何修改Material-UI Slider组件hover与active状态下的阴影颜色

• 阴影来源说明：你无法修改的蓝色雾状阴影是Slider组件MuiSlider-thumb类在hover、聚焦、激活点击三个状态下默认挂载的box-shadow属性，你之前只修改了thumb的基础样式，没有覆盖状态类的样式规则所以不生效。

方案1：Styled-Components 局部覆盖（推荐单个组件自定义用） #

直接在你封装的自定义Slider样式中补充状态样式即可，示例代码如下：

import Slider from '@mui/material/Slider';
import styled from 'styled-components';

const CustomSlider = styled(Slider)`
  /* 你原有已写的track、thumb、ticks等基础样式 */
  .MuiSlider-track {
    background-color: #2ecc71; // 替换为你的自定义轨道颜色
  }
  .MuiSlider-thumb {
    background-color: #2ecc71; // 替换为你的自定义滑块颜色
    /* 新增：覆盖三种状态下的阴影效果 */
    &:hover,
    &.Mui-focusVisible,
    &.Mui-active {
      // 替换为你想要的阴影颜色和参数，不需要阴影直接写 box-shadow: none;
      box-shadow: 0 0 0 8px rgba(46, 204, 113, 0.16);
    }
  }
`;

如果样式不生效是优先级问题，可以在属性值末尾加!important强制覆盖。

方案2：全局主题覆盖（推荐多Slider统一样式用） #

如果你项目中所有Slider都要统一修改这个阴影，可以通过Material UI的主题配置全局覆盖：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiSlider: {
      styleOverrides: {
        thumb: {
          '&:hover, &.Mui-focusVisible, &.Mui-active': {
            boxShadow: '0 0 0 8px rgba(46, 204, 113, 0.16)', // 按需修改参数
          }
        }
      }
    }
  }
});

// 最后用ThemeProvider包裹你的应用根组件即可

内容的提问来源于stack exchange，提问作者Oystein