我可以修改 Slider
样式使用 withStyles
:
const CustomSlider = withStyles(theme => ({
disabled: {
color: theme.palette.primary.main
},
thumb: {
height: 24,
width: 24,
},
}))(Slider);
但是
height
和 width
仅当组件为 disabled={false}
时才应用拇指的.有没有简单的方法来改变 slider
height
和 width
在 disabled={true}
?演示:
https://codesandbox.io/s/slide-thumb-size-gxb4g?file=/demo.js
最佳答案
原因
样式被 className Mui-disabled
覆盖
你可以看到颜色会保持。
如何解决
覆盖 MuiSlider-thumb
的样式或 Mui-disabled
一种选择:使用 MUI 类名 nesting selector
"& .MuiSlider-thumb": {
height: 24,
width: 24
}
通知
withStyles
attributes 引用 CSS API,您可以使用 className + style hooks 来自定义 CSS API 不公开的 className完整代码:
import React from "react";
import Slider from "@material-ui/core/Slider";
import Paper from "@material-ui/core/Paper";
import { withStyles, makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
margin: {
margin: theme.spacing(10),
"& .MuiSlider-thumb": {
height: 24,
width: 24
}
}
}));
const CustomSlider = withStyles(theme => ({
disabled: {
color: theme.palette.primary.main
},
thumb: {
// color: "red"
}
}))(Slider);
export default function MyCustomSlider() {
const classes = useStyles();
return (
<div>
<Paper className={classes.margin}>
<CustomSlider
defaultValue={[10, 15]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={true}
/>{" "}
<CustomSlider
defaultValue={[5, 7]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={false}
/>{" "}
</Paper>
</div>
);
}
更新
对于 withStyles
const styles = theme =>
createStyles({
margin: {
margin: theme.spacing(10)
},
thumb: {
"& .MuiSlider-thumb": {
height: 24,
width: 24
}
}
});
function MyCustomSlider(props) {
// const classes = useStyles();
return (
<div>
<Paper className={props.classes.margin}>
<Slider
defaultValue={[10, 15]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={true}
className={props.classes.thumb}
/>{" "}
<Slider
defaultValue={[5, 7]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={false}
/>{" "}
</Paper>
</div>
);
}
export default withStyles(styles)(MyCustomSlider);
关于javascript - 禁用时如何更改material-ui slider 拇指样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61206613/