Material-UI vertical ToggleButtonGroup style error with border

I've found out solution myself.

 style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}

Instead of style={{borderColor: 'red'}} I used outlined css. It shows borders perfectly.

When we add above style to every ToggleButton we can see every borders.

<ToggleButtonGroup value={formats} orientation="vertical" onChange={handleFormat} aria-label="text formatting">
  <ToggleButton value="bold" aria-label="bold" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatBoldIcon />
  </ToggleButton>
  <ToggleButton value="italic" aria-label="italic" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatItalicIcon />
  </ToggleButton>
  <ToggleButton value="underlined" aria-label="underlined" style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatUnderlinedIcon />
  </ToggleButton>
  <ToggleButton value="color" aria-label="color" disabled style={{outlineColor: 'red', outlineWidth: '1px', outlineStyle: 'solid', margin: '2px'}}>
    <FormatColorFillIcon />
    <ArrowDropDownIcon />
  </ToggleButton>
</ToggleButtonGroup>

Thanks for your help everybody!!!

This is a bug in the styling for the selected state for vertical toggle buttons. I have logged the issue here: https://github.com/mui-org/material-ui/issues/22779. The gist of the problem is that the selected state is receiving the selected-state style modifications intended for the horizontal orientation:

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    '&$selected': {
      '& + &': {
        borderLeft: 0,
        marginLeft: 0,
      },
    }
  }
}

In order to fix this, we need to undo the borderLeft change (it isn't necessary to undo the marginLeft change, since it is already zero for vertical) and we need to apply the equivalent changes to "top" instead of "left". The double ampersands increase the specificity to help ensure that these style overrides win over the default styling.

import MuiToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import { withStyles, fade } from "@material-ui/core/styles";

const ToggleButtonGroup = withStyles((theme) => ({
  groupedVertical: {
    "&&.Mui-selected + &&.Mui-selected": {
      borderLeft: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
      borderTop: 0,
      marginTop: 0
    }
  }
}))(MuiToggleButtonGroup);