Angular2 css basierend auf dem Namen des Komponentenselektors anwenden

Question

Ich benutze ngx-bootstrap datepicker, der daypicker, monthpicker und yearpicker als innere Komponente hat. Ich möchte css auf eine Tabelle anwenden, die in daypicker vorhanden ist.

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

custom-Datepicker-component.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

Sie können eine CSS-Klasse zu Ihrer Tabelle hinzu:

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

und dann die reguläre Klassenauswahl verwenden:

.new-class { 
    // your styling 
} 

Alternativ, eine Klasse zu Ihrem picker oder daypicker wie so hinzufügen:

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

Und verwenden Sie Nachkommen Selektor:

.new-class table { 
    // your styling 
} 

Answer 2

es ist so einfach, wie diese Komponente Namen ist es selbst wir CSS anwenden können

custom-Datepicker-component.scss

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

Answer 3

können Sie versuchen, diese:

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