Как изменить стиль большого пальца слайдера материала, когда он отключен

Question

Я могу изменить стиль Slider, используя withStyles:

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

, но height и width большого пальца применяются только тогда, когда компонент имеет значение disabled={false}.

Есть ли простой способ изменить ползунок height и width на disabled={true}?

Демо: https://codesandbox.io/s/slide-thumb-size-gxb4g?file= / демо. js

Answer 1

Причина

Стиль был переопределен className Mui-disabled

Вы можете видеть, что цвет сохранится.

Как ее решить

Переопределить стиль MuiSlider-thumb или Mui-disabled

Один вариант: использовать MUI className селектор вложенности

"& .MuiSlider-thumb": {
  height: 24,
  width: 24
}

Обратите внимание: withStyles атрибуты относятся к CSS API, вместо этого вы можете использовать хуки стиля className +, чтобы настроить className, который не предоставляется API CSS, как этот

Полный код :

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