treycordova / nativejsx

JSX to native DOM API transpilation. :yellow_heart: <div> ⟹ document.createElement('div')!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot use React-like inline styles

odzb opened this issue · comments

commented

If I try to assign inline styles to an element:

const e = <div style={{flex}}></div>;

Then the style attribute part of the output will be:

$$c.setAttribute('style', { flex: flex });

Which just won't work. For it to work, nativejsx would have to iterate through props and assign each like this:

$$c.style.flex = 1;

As a workaround, we have to break our React habits and pass styles as strings, which feels like a barrier between "normal JSX" and "nativejsx JSX":

const e = <div style={`flex: ${flex}`}></div>;

React-like styling just hit master.

commented

Awesome, thank you! When to expect a release? Or maybe you can make a hidden beta release (under a tag) so we can start testing it?

Styles made it into 4.0.0. Thanks for all of your issues and bug reports. Very helpful.