how do i delete the default radius of the toggle buttons?

re your question’s particular answer you can try following way.

const StyledToggleButton = styled(ToggleButton)({
  '&.MuiToggleButtonGroup-grouped:not(:last-of-type)':{
        borderRadius: '4px !important',
      },
});

But my preferred way to display toggle buttons is below,

  <ToggleButton
    sx={{
      "&.MuiToggleButtonGroup-grouped": {
        borderRadius: "4px !important",
        mx: 1,
        border: "1px solid lightgrey !important"
      }
    }}
  >
    ...
  </ToggleButton>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top