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

Question

我正在使用ngx-bootstrap datepicker，它有daypicker，monthpicker和yearpicker作为内部组件。我想将css应用于daypicker中存在的表。

acceleration

CustomDatePickerComponent.ts

<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>

自定义-日期选择器-component.html

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

export class CustomDatePickerComponent {

}

自定义-日期选择器-component.scss

<datepicker></datepicker>

Answer 1

您可以在表格中添加css类：

<?xml version='1.0' encoding='UTF-8'?><xsd:schema 
 xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="urn:com/IMIC" 
targetNamespace="urn:com/IMIC">
<xsd:annotation>
    <xsd:documentation>
    </xsd:documentation>
</xsd:annotation>
<xsd:element name="IMIC">
    <xsd:complexType>
        <xsd:sequence>
            <xsd:element minOccurs="1" ref="ID" />
            <xsd:element minOccurs="1" ref="IT" />
            <xsd:element minOccurs="1" ref="CT" />
            <xsd:element minOccurs="1" ref="MI" />
            <xsd:element minOccurs="1" ref="KBC" />
            <xsd:element minOccurs="1" ref="TT" />
            <xsd:element minOccurs="1" ref="TI" />
            <xsd:element minOccurs="1" ref="CN" />
            <xsd:element minOccurs="0" ref="ST" />
        </xsd:sequence>
    </xsd:complexType>
</xsd:element>
<xsd:element name="ID" type="xsd:date" />
<xsd:element name="IT" type="xsd:integer" />
<xsd:element name="CT" type="xsd:integer" />
<xsd:element name="MI" type="xsd:integer" />
<xsd:element name="KBC" type="xsd:integer" />
<xsd:element name="TT" type="xsd:integer" />
<xsd:element name="TI" type="xsd:string" />
<xsd:element name="CN" type="xsd:string" />
<xsd:element name="ST" type="xsd:integer" />
</xsd:schema>

然后使用常规类选择器：

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

或者将类添加到datepicker或daypicker中，如下所示：

.new-class {
    // your styling
}

并使用后代选择器：

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

Answer 2

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

自定义-日期选择器-component.scss

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

Answer 3

你可以试试这个：

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