事象
特定の画面に表示中画面を印刷する機能があり、以下の様に印刷用のcss(print.css)を取り込みたいのですが、bodyタグに対するスタイル(width: 600px !important;)のみうまく適用されません。
cssがカプセル化されてしまっており、component外にあるbodyタグに対してスタイルが適用できないことが原因と考えています。
よい解決策が浮かばず、ご意見を頂きたいです。
component
@Component({
:
styleUrls: ["./hoge.css"]
})
:
hoge.css
/* 印刷用CSSのimport */
@import url("./print.css") print;
print.css
/* 印刷用CSS */
body {
width: 600px !important;
}
#header ul#link {
display: none !important;
}
div.PrintArea {
display: none !important;
}
解決のために実施したこと
印刷用cssをグローバルにすれば(styles.cssにhoge.cssの内容を追加する)、bodyタグにもスタイルが適用されました。
しかし、そうすると全ての印刷画面にcssが適用されてしまうため、避けたいです。
環境
Angular 8
TypeScript 3.4.5