How to remove the halo of MUI slider thumb when focused?-CodePudding

import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";

function valuetext(value) {
  return `${value}°C`;
}

export default function RangeSlider() {
  const [value, setValue] = React.useState([20, 37]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: 300 }}>
      <Slider
        getAriaLabel={() => "Temperature range"}
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

This is my css:

  .MuiSlider-thumb {
    &:hover {
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    &:focus {
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }

It works for hover, but when focused the halo is still the default blue halo.

CodePudding user response：

MUI focus is a different class called Mui-focusVisible. So change to this in your css:

.MuiSlider-thumb:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}    
.Mui-focusVisible {
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
}

Please note to add !important to override default MUI behaviour.