Материал пользовательского интерфейса вертикальный слайдер. Как изменить толщину рельса в вертикальном материале UI Slider (React)

Question

Я попытался изменить ширину или высоту свойства рельса в слайдере пользовательского интерфейса материала, где я взял его из демонстрации на их веб-сайте. Однако я не могу изменить толщину.

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

Я могу получить это по горизонтали:

Однако я не могу получить его в вертикальном режиме:

Answer 1

Так как materialUI переопределяет css, вы можете использовать !important для приоритетов своих собственных css. Так что добавьте это к вашему jss / css: width: "14px !important",

https://codesandbox.io/s/material-demo-782cp?fontsize=14&hidenavigation=1&theme=dark

  rail: {
    height: 24,
    width: "14px !important",
    borderRadius: 24,
    opacity: 1,
  }