Не могу изменить borderRadius у компонента Badge

Есть такой компонент

        <BadgeErrorStyled
          variant="standard"
          color={severity}
          badgeContent={countErrorsInOneAlert}
          max={100000}
        />

у него выставляется бордер радиус 10px, а мне нужно 64 по макету

Пишу для него такие стили, радиус все-равно 10пкс

export const BadgeErrorStyled = styled(Badge)(({ theme: { spacing } }) => ({
  height: spacing(2.5),
  marginTop: spacing(2.5),
  marginRight: spacing(2),
  borderRadius: '64px',
}));

Ответы (1 шт):

Автор решения: Oliver Patterson

Вам нужно стилизовать .MuiBadge-badge.

export const BadgeErrorStyled = styled(Badge)(({ theme: { spacing } }) => ({
  "& .MuiBadge-badge":
  {
    height: spacing(2.5),
    marginTop: spacing(2.5),
    marginRight: spacing(2),
    borderRadius: '64px',
  }
}));
→ Ссылка