Angular: Как стилизовать динамически генерируемый HTML?

Question

У меня есть сгенерированный элемент sub из этой строки кода со свойством [sub]

      <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name="Checkout" id="checkout-menu-icon" [sub]="(products$ | async)?.length"></li>

Я пытаюсьстилизовать элемент sub, который генерируется, потому что для выравнивания установлено значение bottom: -.25em;

Я пытаюсь установить для него свои собственные стили, но ни один из стилей не применяется.

    #checkout-menu-icon > a > div > sub {
        top: 0 !important;
        left: 3px !important;
    }

и

    #checkout-menu-icon > a > div > .ng-star-inserted {
        top: 0 !important;
        left: 3px !important;
    }

Как применить стили к элементу sub ниже?

     <li id="checkout-menu-icon" name="Checkout" style="cursor: pointer" template-menu-item="" _nghost-c13="" tabindex="0" ng-reflect-router-link="/request/checkoutReview" ng-reflect-icon="fa-shopping-cart" ng-reflect-name="Checkout" ng-reflect-sub="1" ng-reflect-display-mode="0" class="ng-star-inserted">
          <a _ngcontent-c13="" routerlinkactive="active" ng-reflect-router-link="/request/checkoutReview" ng-reflect-router-link-active="active" href="/request/checkoutReview">
                           <!--bindings={
                              "ng-reflect-ng-if": "true"
                            }-->
           <span _ngcontent-c13="" class="ng-star-inserted" style="color: rgb(69, 69, 69);">
           <i _ngcontent-c13="" class="fa fa-2x fa-shopping-cart" ng-reflect-klass="fa fa-2x" ng-reflect-ng-class="fa-shopping-cart"></i></span>

           <div _ngcontent-c13="" class="tabName" style="color: rgb(69, 69, 69);">Checkout
                            <!--bindings={
                            "ng-reflect-ng-if": "1"
                            }-->
               <sub _ngcontent-c13="" class="ng-star-inserted">1</sub>
           </div>
         </a>
    </li>

Answer 1

Эта проблема связана с тем, как Angular обрабатывает просмотр инкапсуляции .Если вы добавите ваши стили в ваш основной файл styles.css , это должно исправить вашу проблему.

Answer 2

Попробуйте удалить стили, которые вы добавили, и просто добавьте стили ниже: -

#checkout-menu-icon sub {
   vertical-align: middle;
}