[TreeView] no selected background color applied on mobile device #20311
Description
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
There is no selected background color for a selected tree item.
Expected Behavior 🤔
There is selected background color for a selected tree item.
Steps to Reproduce 🕹
https://codesandbox.io/s/wizardly-maxwell-e7mmk
Steps:
- Select item
export const styles = (theme) => ({
/* Styles applied to the root element. */
root: {
listStyle: 'none',
margin: 0,
padding: 0,
outline: 0,
WebkitTapHighlightColor: 'transparent',
'&:focus > $content $label': {
backgroundColor: theme.palette.action.hover,
},
'&$selected > $content $label': {
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
},
'&$selected > $content $label:hover, &$selected:focus > $content $label': {
backgroundColor: fade(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',//******************************************
},
},
},