Material UI withStyles,尝试深入到禁用的开关 css 覆盖
MaterialUI withStyles, trying drilling down to a disabled switches css override
我在前端使用 React 和 MaterialUI 进行开发,我有一堆自定义输入。除了这个,一切都很好。无论我使用哪种选择器组合,我似乎都无法指向正确的选择器来更改黑色。
此外,最好有一种清晰的方法来识别,只需查看元素选择器即可深入了解正确的组件。有没有办法做到这一点(授人以渔之类的)。Here is the image of the element when I inspect it and the color I'm trying to get at.
这里是样式对象:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
这适用于默认的 MUI 开关。如果需要,您可以通过向选择器添加额外的 &
来提高特异性。如果都失败了,请提供一个codesandbox,并准确说明你在什么场景下想要什么颜色。
我在前端使用 React 和 MaterialUI 进行开发,我有一堆自定义输入。除了这个,一切都很好。无论我使用哪种选择器组合,我似乎都无法指向正确的选择器来更改黑色。
此外,最好有一种清晰的方法来识别,只需查看元素选择器即可深入了解正确的组件。有没有办法做到这一点(授人以渔之类的)。Here is the image of the element when I inspect it and the color I'm trying to get at.
这里是样式对象:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
这适用于默认的 MUI 开关。如果需要,您可以通过向选择器添加额外的 &
来提高特异性。如果都失败了,请提供一个codesandbox,并准确说明你在什么场景下想要什么颜色。