Блог

Здравствуйте, ребята, я создаю приложение. В своем приложении я использую угловой пакет перетаскивания CDK. Проблема в том, что когда я пытаюсь перетащить элемент, некоторые элементы моего стиля не действуют. Я изучаю страницу angular и обнаружил, что это связано с тем, что, когда я пытаюсь перетащить элемент, angular создаст клон объекта, который является дочерним элементом элемента body.

В обычной ситуации эта проблема устраняется копированием стилей в файл global style.css, но в моей ситуации у меня разные темы для моего приложения, поэтому мой шаблон компонента приложения выглядит примерно так

   <main [class]="theme">
    <router-outlet></router-outlet>
  </main>
 

вот как я загружаю тему.
и те стили, которые не работают, — это что-то вроде этого

 main.theme-purple
{
 .cdk-drag-preview{
   background-color: purple;
  }
}

main.theme-pink
{
    .cdk-drag-preview{
   background-color: pink;
  }
}
 

как я уже сказал, клон является дочерним элементом элемента тела, поэтому стили не загружаются.
я также прочитал на странице angular, что мы можем изменить родителя клона с помощью cdkDragPreviewContainer, но я не знаю, как это сделать.
есть какие-нибудь идеи ?