rubyinline-stylesreact.rb

auto-adding of 'px' suffix to style values in react.rb

I've noticed that when I try to set the z-index of a page element using inline style, px gets added to the value automatically but z-index needs a number not a pixel value.

So the web-browser won't accept it as a valid value and so Z-index effectively doesn't work because of it.

I'm doing

{
  "z-index" => -1
}
Solution

  • Style attributes should be specified in camel case. For css z-index: -1; write { zIndex: -1 }.

    React.js converts css declarations from camel case to their proper format

    React also automatically adds the 'px' suffix to unit-less property values, with some exception as outlined in these docs.