📄

react-to-print border not working

This article was automatically translated from theJapanese original by AI. It may contain translation errors.

This post was published over 2 years ago. Its content may be outdated.

Introduction

I ran into an issue where a CSS border wouldn’t take effect while building a print page with react-to-print. I solved it, so I’ll describe how. I’m using Chakra UI, so I’m using Chakra UI components, but I haven’t confirmed whether the same issue occurs with other styling approaches.

https://www.npmjs.com/package/react-to-print

The problematic code

The following code uses Chakra UI components. In the case that didn’t work, borderStyle, border, and borderColor were written separately.

before

In the case where the border was applied, everything was written together in border.

after

Conclusion

I hope this helps as many people as possible.

Recent Articles

Network(beta)

Drag to move / Ctrl+wheel to zoom