Shorthand for Specifying Pixel Values in style props Back

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:

/** rendered as "height:10px" */
var divStyle = {height: 10};
    <div style={divStyle}>Hello World!</div>,

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

  • animationIterationCount
  • boxFlex
  • boxFlexGroup
  • boxOrdinalGroup
  • columnCount
  • fillOpacity
  • flex
  • flexGrow
  • flexPositive
  • flexShrink
  • flexNegative
  • flexOrder
  • fontWeight
  • lineClamp
  • lineHeight
  • opacity
  • order
  • orphans
  • stopOpacity
  • strokeDashoffset
  • strokeOpacity
  • strokeWidth
  • tabSize
  • widows
  • zIndex
  • zoom
Empty Comments
Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.