Javascript 如何更改材质ui滑块拇指样式，当它'；残疾的

我可以使用

with style

修改

滑块的
样式：

const CustomSlider = withStyles(theme => ({
  disabled: {
    color: theme.palette.primary.main
  },
  thumb: {
    height: 24,
    width: 24,
  },
}))(Slider);

但拇指的
高度
和
宽度
仅在组件被
禁用={false}
时应用

是否有一种简单的方法可以更改
disabled={true}
上的滑块
高度
和
宽度

演示：
原因
样式被className
Mui disabled覆盖

你可以看到颜色会保持不变


如何解决
覆盖
MuiSlider thumb
或
Mui disabled

一个选项：使用MUI类名称

注意
withStyles
属性指的是cssapi，您可以使用className+样式挂钩来定制cssapi没有公开的类名

完整代码：

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>
  );
}

从“React”导入React；
从“@material ui/core/Slider”导入滑块；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/styles”导入{withStyles，makeStyles}”；
const useStyles=makeStyles（主题=>({
保证金：{
边距：主题。间距（10），
“&.MuiSlider拇指”：{
身高：24，
宽度：24
}
}
}));
const CustomSlider=带有样式（主题=>({
残疾人士：{
颜色：theme.palete.primary.main
},
拇指：{
//颜色：“红色”
}
}))（滑块）；
导出默认函数MyCustomSlider（）{
const classes=useStyles（）；
返回(
{" "}
{" "}
);
}



更新
因为风格

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);

constyles=theme=>
创建样式({
保证金：{
页边空白：主题。间距（10）
},
拇指：{
“&.MuiSlider拇指”：{
身高：24，
宽度：24
}
}
});
功能MyCustomSlider（道具）{
//const classes=useStyles（）；
返回(
{" "}
{" "}
);
}
导出默认样式（样式）（MyCustomSlider）；

@keikai向CodeSandbox中添加了答案。这里的答案对我不起作用。我只添加了
！重要信息
：
{height:“24px！important”，width:“24px！important”}
是否有方法将其传递到
with styles
而不是
makeStyles
，您可以通过
withStyles
提供的道具类自定义多个组件
className
，这样您就可以做到。@StevenG更新了
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);