@emotion/styled для элемента, расположенного по className в меню antd

Question

У меня есть меню antd, где в css есть это...

.ant-menu.ant-menu-dark .ant-menu-item-selected.main-menu-item {
  background-color: transparent; /*Overriden property*/
}

Этот css перекрывает уродливый эффект, который мне не нужен в меню. Оно работает. Мой вопрос в том, что я переключаюсь на стили @emotion, чтобы я мог условно отображать css, и я не знаю, как сделать этот css пригодным для использования для стилей @emotion. Эти имена классов встроены в меню antd, и я их не устанавливал. Как я могу преобразовать CSS выше в @emotion CSS в React?

Я пытаюсь что-то вроде этого...

const EmotionMenuItem = styled(Menu.Item)`
    &:hover {
        background-color: transparent !important;
    }
    .ant-menu.ant-menu-dark .ant-menu-item-selected.main-menu-item {
        background-color: transparent; /*Overriden property*/
    }
`

наведение работает, а остальное нет.

При необходимости я могу опубликовать дополнительный код.

@emotion/styled для элемента, расположенного по className в меню antd

Ответы (0)