I am using "react-final-form" script for Forms (I have also tried with "react-hook-form") and if I add style to my Inputs then onSubmit doesnt work (it reloads whole page).
I can not figure it out why.
There is snippet with part of my code -> https://codesandbox.io/embed/boring-wind-gnqx5?fontsize=14&hidenavigation=1&theme=dark
If I delete -> FormContainerPart <- Container in App-js then it works.
Thank you for helping!
It's not about styling, but about your generated HTML structure.
FormContainerPart is a form so when you're submitting your form (by clicking the button) you're submitting your Form from react-final-form AND your form from FormContainerPart.
And as you're not catching the onSubmit handler on your form by FormContainerPart, well it goes to default navigator behavior, which is: reload the page
So, as there is no need for FormContainerPart to be a form just change your styled to
export const FormContainerPart = styled.div`
...
`