Files
react.dev/tips/06-style-props-value-px.md
Paul O’Shannessy dfd4e09c18 update docs for 0.12.2 changes
(cherry picked from commit e6e60c4fa848d1c9ce1349eff750cfa2faf156dc)
2014-12-18 12:47:32 -08:00

904 B

id, title, layout, permalink, prev, next
id title layout permalink prev next
style-props-value-px Shorthand for Specifying Pixel Values in style props tips style-props-value-px.html maximum-number-of-jsx-root-nodes.html children-props-type.html

When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works:

var divStyle = {height: 10}; // rendered as "height:10px"
React.render(<div style={divStyle}>Hello World!</div>, mountNode);

See Inline Styles for more info.

Sometimes you do want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:

  • columnCount
  • fillOpacity
  • flex
  • flexGrow
  • flexShrink
  • fontWeight
  • lineClamp
  • lineHeight
  • opacity
  • order
  • orphans
  • strokeOpacity
  • widows
  • zIndex
  • zoom