コンポーネント内に配置された個別コンポーネントは、デフォルトテーマのコンポーネントスタイルを適用します。XCSSファイルとcssclassプロパティを活用して、配布するコンポジットコンポーネントにのみ適用するスタイルを使用することができます。

XCSSファイルを編集して画面に適用

モジュールプロジェクトを生成する際、プロジェクト名でXCSSファイルを自動生成します。生成されたファイルは、Resource Explorerタブで検索できます。

.Calendar.simple_module .datepicker .head
{
	background : orangered;
}
.Calendar.simple_module .datepicker .body .weekband
{
	background : orangered;
}
.Calendar.simple_module .datepicker .body
{
	-nexa-border : 1px none transparent;
}

.Calendar.simple_module .datepicker .body .dayitem[userstatus=saturday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .dayitem[userstatus=sunday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=saturday]
{
    color : #ffffff;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=sunday]
{
    color : #ffffff;
}
.Calendar.simple_module_purple .datepicker .head
{
	background : #C785C8;
}
.Calendar.simple_module_purple .datepicker .body .weekband
{
	background : #C785C8;
}