search

adamhaile / surplus

High performance JSX web views for S.js applications
636 stars 26 forks source link

Cannot set style attribute by string #72

Closed michal-minich closed 5 years ago

michal-minich commented 5 years ago

works <span style={{color: "red"}}>... does not works <span style={"color: red"}>... took me while to figure out why string does not works (hint was that error is in spread)

It is certainly flexible to specify styles as object, but as string it seems useful too, or at least improve the error message.

I don't know if this is on purpose or by omission.

Thank you.

asprionj commented 5 years ago

Edit 2: I did try it in the regular setup now (not Surplus-Toys) and it really does not work. I guess it's up to the author of Surplus whether to add support for this feature. Personally, I don't see much use (static styling via CSS, dynamic styling is convenient by objects) -- which use-case do you have in mind?

Edit: Don't have access to my actual setup and commented blindfoldedly; now I quickly tried the "pure-string style" below in CodePen with Surplus-Toys and it really did not work. I'll try it with the actual Surplus compiler this evening. If it does not work, I agree that it should...

[Original comment:] You can use a string, but then without the embedding brackets. That is, you're then just using plain HTML notation and also need the semicolons after each statement: <span style="color: red;">...

Generally, one would use JSX-embedded styling for dynamic styling at runtime, e.g. to highlight a selection. For overall "static" styling of your UI, the classic "CSS + classes" solution is preferable (although it's tempting to define all styles in JS(X), think "fully self-contained, re-usable, pre-styled, theme-able components"...).

michal-minich commented 5 years ago

My primary purpose is to generate style in JS/TS. I'm sorry I did not made it clear in my post. It has to do with DOM element.style is object not a string.