Специфика CSS в угловом компоненте, использующем / deep /, когда класс находится за пределами компонента

Question

Я сделал компонент кнопки для библиотеки угловых компонентов, которую я собираю.Кнопка работает хорошо, и компонент реализован так:

<sio-button
    [buttonLabel]="'Button Text'"
    [buttonFormat]="'fluid'"
    [buttonStyle]="'1L'"
    (buttonClicked)="outputButtonClick()" >
</sio-button>

Как вы можете видеть, я пропускаю различные значения через декоратор Input(), и стиль кнопки устанавливается с использованием строкового значения сокращенной строки,шаблон выглядит так, и метод используется для вывода нужных CSS-классов в виде строки {{buttonLabel}}, визуализированный вывод выглядит так -

<sio-button _ngcontent-c0="" _nghost-c2="" ng-reflect-button-label="Button Text" ng-reflect-button-format="compact"
    ng-reflect-button-style="primary-line">
    <button _ngcontent-c2="" class="sio-btn sio-btn--primary-line sio-btn--compact" ng-reflect-klass="sio-btn"
        ng-reflect-ng-class="sio-btn--primary-line sio-btn-"> Button Text
    </button>
</sio-button>

Я хочу, чтобы все пользователи компонентов пользовательского интерфейсабиблиотека для использования моих кнопок в качестве группы кнопок, это просто, я просто обертываю DIV установленным классом CSS, чтобы я мог изменить CSS кнопок внутри, так как мне нужно удалить border-right и border-left на первомкнопка и последняя кнопка, содержащиеся в группе кнопок, вот так ...

<div class="sio-btn-group">
    <sio-button [buttonLabel]="'Button Left'" [buttonFormat]="'compact'" [buttonStyle]="'1L'">
    </sio-button> <!-- this needs to lose its borfer-right -->
    <sio-button [buttonLabel]="'Button Middle'" [buttonFormat]="'compact'" [buttonStyle]="'1L'">
    </sio-button>
    <sio-button [buttonLabel]="'Button Right'" [buttonFormat]="'compact'" [buttonStyle]="'1L'">
    </sio-button> <!-- this needs to lose its border-left -->
</div>

Итак, в моем файле sio-button SCSS я хочу написать правило CSS для перезаписи границ для первого и последнего дочернего элемента (запомнитечто sio-btn-group DIV находится за пределами компонента кнопки), поэтому в мой файл button.component.scss я добавляю следующее

/deep/.sio-btn-group .sio-btn--primary-line {
  &:first-of-type  {
    border-right: none;
  }

  &:last-of-type  {
    border-left: none;
  }
}

И это не работает, поскольку стили перезаписываютсяtten на всех трех компонентах кнопки.Поэтому я изменяю это на

/deep/.sio-btn-group .sio-btn--primary-line {
  &:first-child  {
    border-right: none;
  }

  &:last-child  {
    border-left: none;
  }
}

Это имеет тот же эффект, что и все кнопки, содержащиеся в .sio-btn-group, удаляют свои левую и правую границы.Если я удаляю / deep /, он не работает вообще, и я должен добавить секунду /deep/, как, например, /deep/.sio-btn-group /deep/.sio-btn--primary-line, все левая и правая границы будут удалены.Что не так с моим селектором CSS?Если кто-то может помочь мне понять, что я делаю неправильно, я был бы очень признателен.

Если вы считаете, что я должен добавить кодовую ручку, пожалуйста, скажите, и я добавлю ее, или, если мое объяснение сбивает с толку, пожалуйста, дайте мне знатьи я перефразирую.

Answer 1

Это исправило мою проблему

/deep/.sio-btn-group sio-button {

      &:first-of-type {

        [class*="-line"] {
          border-right: none;
        }
      }

      &:last-of-type {

        [class*="-line"] {
          border-left: none;
        }
      }
    }