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


我已经尝试在材料 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


我可以在水平上得到这个: 

http://img4.mukewang.com/627f451b00014e2803550036.jpg

但是我无法在垂直模式下获得它:

http://img3.mukewang.com/627f452c00018b5f00860144.jpg

阿晨1998
浏览 94回答 2
2回答

慕无忌1623718

我也偶然发现了这个问题。我通常会尽量避免使用!important,所以我想我会分享一个解决方案。const CustomSlider = withStyles({&nbsp; root: {&nbsp; &nbsp; color: '#52af77',&nbsp; &nbsp; height: 8,&nbsp; &nbsp; '&$vertical': {&nbsp; &nbsp; &nbsp; width: 8&nbsp; &nbsp; }&nbsp; },&nbsp; thumb: {&nbsp; &nbsp; height: 24,&nbsp; &nbsp; width: 24,&nbsp; &nbsp; backgroundColor: '#fff',&nbsp; &nbsp; border: '2px solid currentColor',&nbsp; &nbsp; marginTop: -8,&nbsp; &nbsp; marginLeft: -12,&nbsp; &nbsp; '&:focus, &:hover': {&nbsp; &nbsp; &nbsp; boxShadow: '0px 0px 0px 8px rgba(84, 199, 97, 0.16)'&nbsp; &nbsp; },&nbsp; &nbsp; '&$active': {&nbsp; &nbsp; &nbsp; boxShadow: '0px 0px 0px 12px rgba(84, 199, 97, 0.16)'&nbsp; &nbsp; }&nbsp; },&nbsp; active: {},&nbsp; valueLabel: {&nbsp; &nbsp; left: 'calc(-50% + 4px)'&nbsp; },&nbsp; track: {&nbsp; &nbsp; height: 8,&nbsp; &nbsp; borderRadius: 4&nbsp; },&nbsp; rail: {&nbsp; &nbsp; height: 8,&nbsp; &nbsp; borderRadius: 4&nbsp; },&nbsp; vertical: {&nbsp; &nbsp; '& $rail': {&nbsp; &nbsp; &nbsp; width: 8&nbsp; &nbsp; },&nbsp; &nbsp; '& $track': {&nbsp; &nbsp; &nbsp; width: 8&nbsp; &nbsp; },&nbsp; &nbsp; '& $thumb': {&nbsp; &nbsp; &nbsp; marginLeft: -8,&nbsp; &nbsp; &nbsp; marginBottom: -11&nbsp; &nbsp; }&nbsp; }})(Slider)

qq_遁去的一_1

由于 materialUI 会覆盖 css,因此您可以使用!important自己的 css 来确定优先级。因此,将其添加到您的 jss/css 中:width: "14px !important",https://codesandbox.io/s/material-demo-782cp?fontsize=14&hidenavigation=1&theme=dark&nbsp; rail: {&nbsp; &nbsp; height: 24,&nbsp; &nbsp; width: "14px !important",&nbsp; &nbsp; borderRadius: 24,&nbsp; &nbsp; opacity: 1,&nbsp; }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript