Как применять стили, используя стилизованные компоненты

Question

Я пытаюсь стилизовать свой компонент, используя:

export const StyleCascader = styled(Cascader)`
  background-color: gray;
  ul.ant-cascader-menu {
    background: red !important;
  }
`;

Здесь я использую стилизованные компоненты, но даже я добавил !important, стили не отображаются. В чем может быть проблема?

Демо: https://codesandbox.io/s/custom-trigger-ant-design-demo-gw0kb?file= / StyleCascader. js: 74-210

Answer 1

Вы упомянули селектор ul.ant-cascader-menu, но в DOM такого элемента нет.

https://codesandbox.io/s/custom-trigger-ant-design-demo-f9gb5