Переопределите класс `selected` в MenuItem пользовательского интерфейса материала, используя стилизованные компоненты

Question

Я использую Material-UI для моей библиотеки компонентов и Styled-Components для стилизации компонентов. В настоящее время я застрял в возможности изменить выбранный цвет компонента MenuItem . Вот что я пытался:

const StyledMenuButton = styled(MenuItem)`
  & .selected {
    background-color: red;
  }
`

function MyButtonComponent() {
  return <StyledMenuButton selected>Selected</StyledMenuItem>
}

Я также попытался переопределить класс , как показано в доках материала-интерфейса :

const StyledMenuButton = styled(({ ...other }) => (
  <MenuItem {...other} classes={{ selected: 'selected' }} />
))`
  & .selected {
    background-color: red;
  }
`

Все еще не повезло. Любая идея, как я могу переопределить выбранный стиль, используя styled-компоненты?