使用样式化组件重写Material UI的MenuItem中的“ selected”类

Question

我正在将material-ui用于我的组件库，并使用styled-components对组件进行样式设置。我目前坚持能够更改MenuItem组件的选定颜色。这是我一直在尝试的：

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

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

我还尝试了重写类as shown in the material-ui docks：

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

仍然没有运气。知道如何使用样式化组件覆盖所选样式吗？