Angular2基于组件选择器名称应用css

我使用的是ngx引导数据采集器，它有daypicker、monthpicker和yearpicker作为内部组件。我想将css应用于daypicker中的表

<custom-datepicker>

<datepicker> //ngx-bootstrap datepicker component
    <daypicker>
        <table>
            //rows, want to apply some css to only this table
        </table>
    </daypicker>
    <monthpicker>
        <table>
            //rows
        </table>
    </monthpicker>
    <yearpicker>
        <table>
            //rows
        </table>
    </yearpicker>
</datepicker>

</customdatepicker>

自定义日期选择器组件.html

<datepicker></datepicker>

---

您可以将css类添加到表中：

<datepicker> //ngx-bootstrap datepicker component
    <daypicker>
        <table class="new-class">
            //rows, want to apply some css to only this table
        </table>
    </daypicker>
...

或者，向日期选择器或日期选择器添加一个类，如下所示：

<datepicker class="new-class">
...

---

就这么简单，使用组件名我们可以应用css

自定义日期选择器组件.scss

@Component({
    selector: 'custom-datepicker',
    templateUrl: 'custom-datepicker-component.html',
    styleUrls: ['custom-datepicker-component.scss'],
})

export class CustomDatePickerComponent {

}

//I want to apply this css to a table which is inside daypicker. As of now it's applying to all the tables
table {
    border: 1px solid lightgrey;
}

daypicker {
  table {
    border: 1px solid red;
  }
}

您可以尝试以下方法：

datepicker > daypicker > table {
    border: 1px solid lightgrey;
}

---

看看

/deep/

。日期选择器组件来自ngx bootstart datepicker库，我无法添加/修改任何内容。添加css类不会更改组件本身。在这种情况下，它只是css引擎选择它的一个标志。我的回答不考虑使用SCSS的情况。

daypicker {
  table {
    border: 1px solid red;
  }
}

datepicker > daypicker > table {
    border: 1px solid lightgrey;
}