Material UI v5迁移：Slider组件withStyles替换实现咨询

直接把你的代码替换成下面的写法即可适配 MUI v5：

import { styled } from "@mui/material/styles";
import Slider from "@mui/material/Slider";

const PrettoSlider = styled(Slider)(({ theme }) => ({
  color: "#4791db",
  height: 8,
  "& .MuiSlider-thumb": {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    marginTop: -8,
    marginLeft: -12,
    "&:focus, &:hover, &.Mui-active": {
      boxShadow: "inherit",
    },
  },
  "& .MuiSlider-valueLabel": {
    left: "calc(-50% + 4px)",
  },
  "& .MuiSlider-track": {
    height: 8,
    borderRadius: 4,
  },
  "& .MuiSlider-rail": {
    height: 8,
    borderRadius: 4,
  },
}));

export default PrettoSlider;

关键修改点： #

• 移除 v4 的 withStyles 高阶组件，改用 v5 推荐的 styled 样式化组件方案
• 根元素样式直接写在最外层，无需再用 root 键
• 子组件样式通过 MUI v5 标准类名（如 .MuiSlider-thumb、.MuiSlider-valueLabel）定位，替代原来的简洁键名
• 激活状态改用 .Mui-active 类选择器，无需单独声明空的 active 配置项

内容的提问来源于stack exchange，提问作者DrOutis