erikras
commented
6 years ago That's pretty bizarre. If you do the merge yourself manually, it works. (even without "enhancing" the form with the Radium() call – which you weren't doing in your example)
<div style={{ ...styles.one, ...styles.two }}>Within the form</div>Radium is doing some tree crawling to give you that array syntax that React does not support by default. I don't know much about Radium, but it must be providing additional benefits beyond what the ... object spread syntax gives?
I tried recreating this with other simple render-prop components, and they all work when react-final-form does not, so it's not obvious to me which library is at fault here, or what react-final-form could possibly be doing that is breaking Radium.
Maybe crosspost this as an issue on Radium? It might be obvious to someone more familiar with that library. 🤷♂️
What is the current behavior?
When using Radium with React-Final-Form, Radium doesn't seem to work. In the provided example, I styled two div boxes identically with merged styles. (styles.one and styles.two)
What is the expected behavior?
Both div boxes should be red and 300x200 pixels. But only the one outside of a Form works
Sandbox Link
https://codesandbox.io/s/4jy1xlrwyx
What's your environment?
React Final Form 3.4.0 Final Form 4.6.1
Other information
Is this a bug or am I doing anything wrong here?