はじめに
react-to-printを使って、印刷用のページを作成していてcssのborderが効かない問題が発生しました。 解決したので、その方法を記載します。 Chakra UIを使用しているので、Chakra UIのコンポーネントを使用していますが、他のスタイル記述方法で同じ問題が起きるかどうかは確認できていません。
https://www.npmjs.com/package/react-to-print
問題のコード
以下のコードはChakra UIのコンポーネントを使用しています。
できなかった例では、borderStyle,border,borderColorをそれぞれ分けて記述しています。
ボーダーが反映された例では、borderにまとめて記述しています。
おわりに
一人でも多くの方が解決できたら幸いです。
