Angular 1.5 组件 css 范围与嵌套组件答案

【问题标题】：Angular 1.5 component css scoping with nested componentsAngular 1.5 组件 css 范围与嵌套组件
【发布时间】：2018-08-27 06:45:05
【问题描述】：

我正在尝试使用 Angular 1.5 组件来创建按钮组。

<button-group size="default">
   <my-button>Button 1</my-button>
   <my-button>Button 2</my-button>
</button-group>

但是，它会编译为：

<div class="btn-group" ng-transclude>
   <my-button class="ng-scope ng-isolate-scope>
      <button class="btn>Button 1</button>
   </my-button>

   <my-button class="ng-scope ng-isolate-scope>
      <button class="btn>Button 1</button>
   </my-button>
</div>

所以现在我的 CSS 范围都搞砸了：

.btn-group  > .btn:not(:first-child) {
     background: red; //<- doesnt work
 }

基本示例：

const buttonGroup = {
    bindings: {},
    transclude: true,
    template: myButtonGroupTemplate
  };

【问题讨论】：

问题是什么：如何修改您的 css 以使其正常工作或为什么它不工作或其他原因？

标签： css angularjs angular-components

【解决方案1】：

你可以给你的组件添加类

类似的东西：

html

 <button-group size="default">
    <my-button class="awesome-class-btn">Button 1</my-button>
    <my-button class="awesome-class-btn">Button 2</my-button>
 </button-group>

css

.btn-group .awesome-class-btn > .btn:not(:first-child) {
     background: red;
}

【讨论】：