如何设置 MUI 滑块的样式？

Question

import * as React from "react";\nimport Box from "@mui/material/Box";\nimport Slider from "@mui/material/Slider";\n\nfunction valuetext(value) {\n  return `${value}\xc2\xb0C`;\n}\n\nexport default function RangeSlider() {\n  const [value, setValue] = React.useState([20, 37]);\n\n  const handleChange = (event, newValue) => {\n    setValue(newValue);\n  };\n\n  return (\n    <Box sx={{ width: 300 }}>\n      <Slider\n        getAriaLabel={() => "Temperature range"}\n        value={value}\n        onChange={handleChange}\n        valueLabelDisplay="auto"\n        getAriaValueText={valuetext}\n      />\n    </Box>\n  );\n}\n\n

\n

如何使拇指和拇指以内的范围为绿色，而双拇指以外的范围为浅绿色？

\n

\n

Answer 1

您可以使用样式实用程序自定义滑块：

const green500 = "#228b22";
const green900 = "#7FFF00";

const CustomSlider = styled(Slider)(({ theme }) => ({
  color: green500, //color of the slider between thumbs
  "& .MuiSlider-thumb": {
    backgroundColor: green500 //color of thumbs
  },
  "& .MuiSlider-rail": {
    color: green900 ////color of the slider outside  teh area between thumbs
  }
}));

演示