[Bug]: Styles are different when using react-scripts vs vite
wave-light opened this issue · comments
Describe the bug
The tables are styled differently when using a project configured using react-scripts, versus when using Vite.
Also, the date picker does not open at the correct month when using the Vite app.
Here is the link to the app built with react-scripts: https://github.com/wave-light/handsontable-date-demo-1
Here is the link to the app built with Vite: https://github.com/wave-light/handsontable-date-demo-2
The code is almost identical, but the styling is appearing differently between the two projects. Also, the date picker opens the date at the wrong month when using the app built with Vite. It ignores the date format DD/MM/YYYY and opens the calendar as if the date were MM/DD/YYYY.
Video/Screenshots
Project built with react-scripts:
Project built with Vite:
Provide a link to the demo with the bug reproduction
Links to demo repos have been included.
Handsontable version
14.0
Framework version
No response
Your environment
MacOS, Google Chrome
Hi @wave-light
Thank you for reporting this. The issue with font size in an app built with react-scripts is easy to fix. You just have to add this styling to the main CSS file:
table { font-size: 13px !important; }
Apparently, react-scripts overrides the default font size for the table element with its own value. Nevertheless, I will report it internally as an issue.
I can also confirm the second issue. I couldn't find the reason for this behavior, so we will need to investigate it further. I will let you know if we find a solution.
Hi @wave-light
We discovered the source of this issue. It's missing <!DOCTYPE html> declaration in the HTML file. If you add it, then the default style won't be overridden.