如何设置 MUI 滑块的样式？答案

【问题标题】：How to style MUI slider?如何设置 MUI 滑块的样式？
【发布时间】：2021-12-31 23:19:56
【问题描述】：

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

如何让拇指内的范围和拇指绿色以及两个拇指外的范围变浅绿色？

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

在您的 CSS 文件中包含这些类。 Track对应拇指之间的范围，rail是两个拇指之外的范围。

.MuiSlider-thumb{
  color: green;
}
.MuiSlider-rail{
  color:lightgreen;
}
.MuiSlider-track{
  color: green;
}

【讨论】：

【解决方案2】：

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

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

Demo

【讨论】：