材质UI v5迁移-滑块

Question

我正试图将一些遗留的React代码从Material UI v4迁移到v5，我不太明白如何修复我的Slider组件。我已经阅读了这个指南，从我能得到的，似乎我必须用styles 代替，但我不明白如何实现它。

谢谢!

import { styled } from "@mui/material/styles";
import Slider from "@mui/material/Slider";
const PrettoSlider = withStyles({
root: {
color: "#4791db",
height: 8,
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus, &:hover, &$active": {
boxShadow: "inherit",
},
},
active: {},
valueLabel: {
left: "calc(-50% + 4px)",
},
track: {
height: 8,
borderRadius: 4,
},
rail: {
height: 8,
borderRadius: 4,
},
})(Slider);
export default PrettoSlider;

Answer 1

已解决添加:

import { withStyles } from '@mui/styles';