css - Angular2 根据组件选择器名称应用 css

Question

我使用的是 ngx-bootstrap datepicker，它有 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>

CustomDatePickerComponent.ts

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

export class CustomDatePickerComponent {

}

custom-datepicker-component.html

<datepicker></datepicker>

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

//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;
}

Answer 1

您可以向表格中添加一个 css 类:

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

然后使用常规类选择器:

.new-class {
    // your styling
}

或者像这样向您的日期选择器或日期选择器添加一个类:

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

并使用后代选择器:

.new-class table {
    // your styling
}