聚焦时如何消除MUI滑块拇指的光环？答案

【问题标题】：How to remove the halo of MUI slider thumb when focused?聚焦时如何消除MUI滑块拇指的光环？
【发布时间】：2022-01-03 18:21:11
【问题描述】：

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>
  );
}

这是我的 CSS：

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

它适用于hover，但当聚焦时，光环仍然是默认的蓝色光环。

【问题讨论】：

标签： html css reactjs material-ui

【解决方案1】：

MUI 焦点是另一个名为Mui-focusVisible 的类。所以在你的 css 中改成这个：

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

请注意添加 !important 以覆盖默认 MUI 行为。

【讨论】：