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，因此您可以使用BaseViewController来优先考虑自己的CSS。因此，将其添加到您的jss / css中：!important

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

width: "14px !important",

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

2 个答案: