我已经尝试在材料 ui 滑块中更改 rail 属性的宽度或高度,我从他们网站上的 Demo 中获取了它。但是我无法改变厚度。
import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
const useStyles = makeStyles(theme => ({
root: {
width: 300 + theme.spacing(3) * 2
},
margin: {
height: theme.spacing(3)
}
}));
const PrettoSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "4px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
track: {
height: 8,
borderRadius: 0
},
rail: {
height: 8,
borderRadius: 0,
opacity: 1
}
})(Slider);
export default function CustomizedSlider() {
const classes = useStyles();
return (
<div className={classes.root} style={{ height: "100vh" }}>
<PrettoSlider
orientation="vertical"
aria-label="pretto slider"
defaultValue={20}
/>
</div>
);
}
这里有一个代码可以尝试:https ://codesandbox.io/s/material-demo-bl5pt
我可以在水平上得到这个:
但是我无法在垂直模式下获得它:
慕无忌1623718
qq_遁去的一_1
相关分类