There seems to be an issue with the left border not appearing in the toggle bar below that I created using MuiToggleButton. Any idea what could be causing this? Thank you in advance.
view image here view image here
Just a note: it works correctly in the hover state.
1. const ToggleButton = styled(MuiToggleButton)({
'&.MuiToggleButton-root': {},
'&.Mui-selected:hover': {
color: '#10B981',
backgroundColor: 'transparent',
border: '1px solid',
borderColor: '#10B981',
},
'&.Mui-selected': {
color: '#10B981',
backgroundColor: 'transparent',
border: '1px solid',
borderColor: '#10B981',
},
});
In the selected state, the left border is not visible. border : "1px solid red", but the left side is not visible.