在material-ui庫中隱藏slider拇指

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

工作代碼在這里

結果：

專注於

我能夠隱藏主拇指，但不能隱藏“次要拇指”。 我不知道怎么稱呼它，點擊拇指出現的淺藍色。 我怎樣才能刪除它？

我總是想要以下樣式，即使用戶拖動拇指也是如此：

Answer 1

您可以為 hover（偽類）和活動 state 添加樣式覆蓋（對於 MUI，它是.Mui-active ）

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

演示