第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

材質(zhì) UI 垂直滑塊。如何在垂直材質(zhì)UI Slider(React)中更改導(dǎo)軌的厚度

材質(zhì) UI 垂直滑塊。如何在垂直材質(zhì)UI Slider(React)中更改導(dǎo)軌的厚度

阿晨1998 2022-05-14 13:58:25
我已經(jīng)嘗試在材料 ui 滑塊中更改 rail 屬性的寬度或高度,我從他們網(wǎng)站上的 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>  );}這里有一個(gè)代碼可以嘗試:https ://codesandbox.io/s/material-demo-bl5pt我可以在水平上得到這個(gè): 但是我無法在垂直模式下獲得它:
查看完整描述

2 回答

?
慕無忌1623718

TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊

我也偶然發(fā)現(xiàn)了這個(gè)問題。我通常會(huì)盡量避免使用!important,所以我想我會(huì)分享一個(gè)解決方案。


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)


查看完整回答
反對(duì) 回復(fù) 2022-05-14
?
qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

由于 materialUI 會(huì)覆蓋 css,因此您可以使用!important自己的 css 來確定優(yōu)先級(jí)。因此,將其添加到您的 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,

  }


查看完整回答
反對(duì) 回復(fù) 2022-05-14
  • 2 回答
  • 0 關(guān)注
  • 88 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)