在 material-ui 库中隐藏滑块缩略图

Question

我正在尝试隐藏幻灯片拇指。我试图在不使用库的情况下做到这一点，但后来我认为使用 material-ui 应该更好，因为它可能会更容易，但我在这里寻求帮助。

这是我的代码：

import * as React from "react";
import Slider from "@mui/material/Slider";
import "./style.css";

export default function ContinuousSlider() {
  const [value, setValue] = React.useState(30);

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

  return (
    <Slider
      aria-label="Volume"
      value={value}
      onChange={handleChange}
      focusVisible={false}
    />
  );
}

风格：

.MuiSlider-thumb {
  background-color: orange;
  box-shadow: none;
  width: 0px;
  height: 0px;
}

.MuiSlider-rail {
  background-color: orange;
  border: none;
}

.MuiSlider-track {
  background-color: red;
  border: none;
}

.MuiSlider-rail {
  background-color: green;
}

working code here

结果：

专注

我能够隐藏主拇指但不能隐藏“次要拇指”。我不知道怎么称呼它，点击拇指出现的浅蓝色。我怎样才能删除它？

我总是想要以下样式，即使在用户拖动拇指时也是如此：

Answer 1

您可以为悬停 (pseudo-class) 和活动状态（对于 MUI 为 .Mui-active）添加样式覆盖

.MuiSlider-thumb:is(:hover, .Mui-active) {
  display: none;
}

演示

在 material-ui 库中隐藏滑块缩略图

Hide slider thumb in material-ui library

javascript

css

slider

material-ui