Angular2はコンポーネントセレクタの名前に基づいてCSSを適用します

Question

daypicker、monthpicker、yearpickerを内部コンポーネントとして持つngx-bootstrap datepickerを使用しています。私はデイピッカーの中にあるテーブルにCSSを適用したい。

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

} 

カスタムDatePickerの-component.html

<datepicker></datepicker> 

カスタム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

あなたがあなたのテーブルに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 
} 

またそのようなあなたの日付ピッカーまたはdaypickerにクラスを追加します。

を

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

子孫セレクタを使用：

.new-class table { 
    // your styling 
} 

Answer 2

は、それは我々がCSS適用することができ、自己のコンポーネント名を使用して、このような単純なのです

カスタムDatePickerの-component.scss

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

Answer 3

あなたはこの試みることができます：

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