Как я могу применить пользовательский стиль к раскрывающемуся объекту, который ui-select создает динамически?

Question

Я работаю над одностраничным приложением, которое использует AngularJS v1.5.8. Я пытаюсь сделать простое визуальное изменение, но не могу найти, как это сделать.

Существует <ui-select> раскрывающийся объект, который заполняется из списка, получаемого из серверной части.Это работает правильно, но мне нужно сделать выпадающее меню немного больше.Я пытался назначить класс CSS для получающегося выпадающего безуспешно.Стиль, который я применяю к объекту ui-select, кажется, не применяется к div, который является самим выпадающим списком.

Директива ui-select создает <span> с идентификатором "ui-devtype-span".Когда я вручную редактирую этот стиль объекта (как в инструментах разработчика Chrome), я получаю желаемый результат.Но этот объект span не существует в моем коде.Кажется, он генерируется динамически и не наследует стиль от ui-select.Тема "bootstrap"

<ui-select theme="bootstrap"
               ng-model="..."
               on-select="..."
               ng-disabled="..."
               append-to-body="true">
         <ui-select-match allow-clear="" >
          <span >
            {{$select.selected.name}}
          </span>
        </ui-select-match>
      <ui-select-choices
        repeat="group in ...
                 | orderBy: 'name'
                 | filter: $select.search">
        <span ng-bind-html="group.name | highlight: $select.search"></span>
      </ui-select-choices>
</ui-select>

Я пытался добавить свой класс css к каждому тегу HTML в этом фрагменте, но не смог получить динамически сгенерированный <span>, чтобы иметь высоту 45px.Я не могу изменить стиль директивы в более широком смысле, потому что он используется в другом месте приложения, и мои изменения должны применяться только к этому экрану.

Answer 1

Я не могу изменить стиль директивы в более широком смысле, потому что он используется в другом месте приложения,

Затем задайте директиве id.

<ui-select id="select1" theme="bootstrap" ng-model="..."

И нам потомок комбинатор

<style>
   #select1 span {
      font-size: 20px;
   }
</style>

ИЛИ добавить пользовательский класс:

<ui-select class="my-select" theme="bootstrap" ng-model="..."

<style>
   .my-select span {
      font-size: 20px;
   }
</style>