javascripttypescriptmaterial-uitogglebutton

Material UI Toggle Button border doesn't visible

The border line on the left does not appear in the toggle bar below that I prepared with MuiToggleButton. what could be the reason, thanks in advance

enter image description here enter image description here

note : it works correctly in 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.

Solution

  • I made a workaround by giving the following border value to the sx probe of the 1st button.

     sx={{
          borderRight: '1px solid',
          borderRightColor: 'green',
        }}