Material-UI vertical ToggleButtonGroup style error with border

Question

I am using React Material UI ToogleButtonGroup for my front end project.

https://codesandbox.io/s/eyk66?file=/demo.js

This is Material UI ToggleButtonGroup Multiple Selection example code. I changed it as vertical style.

when I select two or more buttons then left border of buttons are disappeared.

I added border color to each Toggle Button but no lucky. Please help me!

Answer 1

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!!!