Units

Style values that carry a unit accept either a bare number, read in the property's default unit, or a string with an explicit unit. Lengths default to logical pixels, angles to degrees and durations to milliseconds. Values are parsed once, when the style crosses to Bevy.

#Usage

<node
  style={{
    width: 240, // logical px
    height: "50vh", // half the window's height
    padding: "8px 16px", // vertical, horizontal
    transform: { rotate: "0.25turn" },
    transition: { transform: { duration: "0.3s" } },
  }}
/>

#Lengths

Layout sizes, insets, margins, padding, gaps, transform translation and shadow offsets are lengths:

• A logical pixel is multiplied by the window's scale factor and Bevy's UiScale resource, so the same value looks the same size on every display.
• The viewport is the target the UI draws into: the window for your app's UI, the texture for UI inside a <surface>. Viewport units follow it when it resizes and ignore UiScale.
• "auto" sizes from content on width, height, the min and max sizes and flexBasis; means "not set" on the insets; absorbs free space on margin; and is 0 on padding, border and the gaps.
• A numeric string without a unit ("16") is pixels. Units are lowercase, except that "auto" matches in any case.
• Anything else ("1em", "2rem", "calc(…)", "16pt") becomes 0 and reports a length devtools warning. The rest of the style still applies.

An { animated } binding on a length property is driven in logical pixels, whatever unit the static value used. See Animated values.

#What percentages are of

The parent's size here is its content box (for an absolute node, its padding box, see Positioning). A percentage of a size that layout hasn't fixed yet, such as the height of an auto-height parent, behaves as "auto". Other properties, such as transform and borderRadius, give their own basis on their pages.

#Four-sided values

margin, padding, border and borderRadius take a Rect, one length per side in any of these forms:

• The shorthand follows CSS order: one value for all sides, two for vertical and horizontal, three for top, horizontal and bottom, four for top, right, bottom and left.
• If an object mixes the two forms, an explicit side wins over its axis.
• On borderRadius the four slots are the corners, starting top-left and going clockwise (see Borders).
• A value always replaces the whole rect. hoverStyle={{ padding: { left: 20 } }} sets the other three sides to 0 while hovered, not to the base style's values.
• A shorthand token that doesn't parse becomes 0 for its sides, more than four values make the whole rect 0, and an unknown object key is ignored. Each reports a rect devtools warning.

#Angles

Rotations (transform, transform3d) and gradient angles are angles:

An invalid angle becomes 0 and reports an angle devtools warning. An { animated } binding on an angle is driven in degrees.

#Durations

A transition's duration and delay are durations: a bare number is milliseconds, "300ms" is milliseconds and "0.3s" is seconds. An invalid duration becomes 0 and reports a time devtools warning. See Style transitions.

#Font sizes

fontSize takes a number (logical pixels), "px", the viewport units, or "rem": a multiple of Bevy's RemSize resource, 20px by default, which makes it the knob for scaling all rem text at once. It does not accept percentages or em. An invalid value becomes 0 and reports a fontSize devtools warning. See <text>.

#Limits

• No calc(), em, or unit arithmetic. Compute mixed values in JavaScript, for example from the window size (see Window).
• Colors are strings of their own; see Colors.

Every style property's accepted type is listed in the style reference.