[英]Material UI vertical Slider. How to change the thickness of the rail in vertical material UI Slider (React)
I have tried changing the width or height of the rail property in material ui slider where I grabbed it from Demo on their website.我曾尝试在材料 ui 滑块中更改 rail 属性的宽度或高度,我从他们网站上的 Demo 中抓取了它。 However I am not able to change the thickness.但是我无法改变厚度。
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>
);
}
There is a code here to try: https://codesandbox.io/s/material-demo-bl5pt这里有一个代码可以尝试: https : //codesandbox.io/s/material-demo-bl5pt
I just stumbled across this issue as well.我也偶然发现了这个问题。 I typically try to avoid using !important
when I can, so I thought I would share a solution.我通常尽量避免使用!important
,所以我想我会分享一个解决方案。
const CustomSlider = withStyles({
root: {
color: '#52af77',
height: 8,
'&$vertical': {
width: 8
}
},
thumb: {
height: 24,
width: 24,
backgroundColor: '#fff',
border: '2px solid currentColor',
marginTop: -8,
marginLeft: -12,
'&:focus, &:hover': {
boxShadow: '0px 0px 0px 8px rgba(84, 199, 97, 0.16)'
},
'&$active': {
boxShadow: '0px 0px 0px 12px rgba(84, 199, 97, 0.16)'
}
},
active: {},
valueLabel: {
left: 'calc(-50% + 4px)'
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
},
vertical: {
'& $rail': {
width: 8
},
'& $track': {
width: 8
},
'& $thumb': {
marginLeft: -8,
marginBottom: -11
}
}
})(Slider)
Since materialUI overrides css you can use !important
to priorities your own css.由于 materialUI 覆盖了 css,您可以使用!important
来确定您自己的 css 的优先级。 So add this to your jss/css: width: "14px !important",
所以把它添加到你的 jss/css: width: "14px !important",
https://codesandbox.io/s/material-demo-782cp?fontsize=14&hidenavigation=1&theme=dark https://codesandbox.io/s/material-demo-782cp?fontsize=14&hidenavigation=1&theme=dark
rail: {
height: 24,
width: "14px !important",
borderRadius: 24,
opacity: 1,
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.