2 回答

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)

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,
}
添加回答
舉報(bào)