シナリオ:
上の画像にあるように、このカレンダー/日付ピッカーのサイズを縮小する必要があります。
Lightningdatepicker.html (Lightning Web コンポーネント テンプレート)
これには、タイプ「date」の lightning-input が含まれています。
Lightningdatepicker .css (Lightning Web コンポーネント CSS ファイル)
サイズを小さくするためのライトニング日付ピッカー/カレンダーの CSS が含まれています
出力 ：
見てわかるように、上記の出力は元の出力、つまり図 1(a)と同じです 。 slds-datepicker(lightning datepicker) に CSS を適用した後でも。これは、LWC によって強制される厳格な CSS 分離により、コンポーネントの CSS に datepicker がアクセスできない/表示されないことが原因です。lightningelement.htmlと同様に、datepicker などの要素は、datepicker のラッパーとして機能する 内に埋め込まれているため、表示できません。
したがって、この問題を解決するには、Salesforce 基本コンポーネントの内部シャドウ DOMに適用したい CSS を静的リソースに配置する必要があります。次に、 lightning/platformResourceLoader モジュールのloadStyleメソッドを使用して、その CSS をロードしました。
js (Lightning Web コンポーネント Js ファイル)
これには、CSS をロードするlightning/platformResourceLoader モジュールのloadStyle メソッドが含まれています。このcustomMinifiedDpは、CSSファイル「customMinifiedDP.css」を含む静的リソースです。
css (静的リソース CSS ファイル)
loadStyle を通じてロードされた上記の CSS では内部要素のオーバーライドが許可されていますが、Lightning バンドルの .CSS からの CSS ではこれが許可されていません。
静的リソースのアップロード後の出力:
Lightning Web コンポーネントの内部要素をオーバーライドすることによって、日付ピッカー/カレンダーのサイズが縮小されたことを示しています。