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 {

}

自定义日期选择器组件.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 或 daypicker 添加一个类：

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

并使用后代选择器：

.new-class table {
    // your styling
}

Answer 2

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

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

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

Answer 3

你可以试试这个：

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