How can I give ToggleButton Border Colors in material ui?

Question

I need to use you for part of my project and I made a lot of changes to you as follows:

const GenderBoxStyle = styled(ToggleButtonGroup)(({ theme }) => ({
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'flex-start',
  alignItems: 'center',
  padding: 0,
  gap: theme.spacing(3),
  paddingLeft: theme.spacing(3),
  border: 'unset !important',
  '& .MuiToggleButtonGroup-grouped': {
    border: '1px solid !important',
    borderRadius: theme.spacing(2),
    borderColor: 'unset',
    color: theme.palette.text.primary,
  },
}));
const ToggleButtonStyle = styled(ToggleButton)(({ theme }) => ({
  color: theme.palette.text.primary,
  px: 3,
  cursor: 'pointer',
  // outlineColor: theme.palette.grey[100],
  // outlineWidth: '1px',
  // outlineStyle: 'solid',
  borderColor: theme.palette.grey[100],
  border: '1px solid !important',
  borderRadius: theme.spacing(2),
  width: 168,
  height: 48,
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginTop: 0,
}));

But I want to change the color of the border as shown below, but it is not possible to use the border:

enter image description here

How can I give Togglebutton Border Colors in material ui?

Answer 1

In the GenderBoxStyle you can try to add MuiToggleButton-standard and set the color for this.

I provide the code snippet, you can try it.

Hope this can help you.

const GenderBoxStyle = styled(ToggleButtonGroup)(({ theme }) => ({
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: 0,
    gap: theme.spacing(3),
    paddingLeft: theme.spacing(3),
    border: 'unset !important',
    '& .MuiToggleButtonGroup-grouped': {
      border: '1px solid !important',
      borderRadius: theme.spacing(2),
      borderColor: 'unset',
      color: theme.palette.text.primary,
    },
    '& .MuiToggleButton-standard': {
        color: '#30a39c'
    }
  }));

Here is the result for changing the color of the border.