材质 UI 垂直滑块。如何在垂直材质UI Slider（React）中更改导轨的厚度

Question

我已经尝试在材料 ui 滑块中更改 rail 属性的宽度或高度，我从他们网站上的 Demo 中获取了它。但是我无法改变厚度。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

我也偶然发现了这个问题。我通常会尽量避免使用!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)

Answer 2

由于 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,

  }