Struct Style 

pub struct Style {

    pub display: Option<Display>,
    pub box_sizing: Option<BoxSizing>,
    pub position_type: Option<PositionType>,
    pub overflow_x: Option<OverflowAxis>,
    pub overflow_y: Option<OverflowAxis>,
    pub scrollbar_width: Option<f32>,
    pub left: Option<Animatable<Length>>,
    pub right: Option<Animatable<Length>>,
    pub top: Option<Animatable<Length>>,
    pub bottom: Option<Animatable<Length>>,
    pub width: Option<Animatable<Length>>,
    pub height: Option<Animatable<Length>>,
    pub min_width: Option<Animatable<Length>>,
    pub min_height: Option<Animatable<Length>>,
    pub max_width: Option<Animatable<Length>>,
    pub max_height: Option<Animatable<Length>>,
    pub aspect_ratio: Option<Animatable<f32>>,
    pub align_items: Option<AlignItems>,
    pub justify_items: Option<JustifyItems>,
    pub align_self: Option<AlignSelf>,
    pub justify_self: Option<JustifySelf>,
    pub align_content: Option<AlignContent>,
    pub justify_content: Option<JustifyContent>,
    pub margin: Option<Rect>,
    pub padding: Option<Rect>,
    pub border: Option<Rect>,
    pub flex_direction: Option<FlexDirection>,
    pub flex_wrap: Option<FlexWrap>,
    pub flex_grow: Option<f32>,
    pub flex_shrink: Option<f32>,
    pub flex_basis: Option<Animatable<Length>>,
    pub gap: Option<Animatable<Length>>,
    pub row_gap: Option<Animatable<Length>>,
    pub column_gap: Option<Animatable<Length>>,
    pub grid_auto_flow: Option<GridAutoFlow>,
    pub grid_template_rows: Option<Vec<RepeatedGridTrack>>,
    pub grid_template_columns: Option<Vec<RepeatedGridTrack>>,
    pub grid_auto_rows: Option<Vec<GridTrack>>,
    pub grid_auto_columns: Option<Vec<GridTrack>>,
    pub grid_row: Option<GridPlacement>,
    pub grid_column: Option<GridPlacement>,
    pub background_color: Option<Animatable<String>>,
    pub border_color: Option<Animatable<BorderColorSpec>>,
    pub border_radius: Option<Rect>,
    pub outline: Option<OutlineSpec>,
    pub box_shadow: Option<BoxShadowList>,
    pub filter: Option<FilterChain>,
    pub backdrop_filter: Option<FilterChain>,
    pub background_gradient: Option<GradientList>,
    pub border_gradient: Option<GradientList>,
    pub background_image: Option<BackgroundImageSpec>,
    pub z_index: Option<i32>,
    pub global_z_index: Option<i32>,
    pub focus_policy: Option<FocusPolicy>,
    pub cursor: Option<String>,
    pub transform: Option<Transform>,
    pub transform3d: Option<Transform3d>,
    pub opacity: Option<Animatable<f32>>,
    pub group_alpha: Option<bool>,
    pub cache: Option<LayerCache>,
    pub transition: Option<Transition>,
    pub scrollbar: Option<ScrollbarSpec>,
    pub color: Option<Animatable<String>>,
    pub font_size: Option<FontSize>,
    pub font_weight: Option<FontWeight>,
    pub font_family: Option<String>,
    pub text_align: Option<Justify>,
    pub line_height: Option<LineHeightSpec>,
    pub letter_spacing: Option<LetterSpacingSpec>,
    pub text_shadow: Option<TextShadowSpec>,
    pub line_break: Option<LineBreak>,
}

A CSS-like style object mapped onto bevy_ui::Node and its sibling visual components. Every field is optional; unset fields keep Bevy’s defaults.

Length-valued fields accept a bare number (logical pixels) or a unit string ("50%", "100vw", "auto", "10px"). Rect-valued fields (margin/padding/border/borderRadius) accept a number (uniform), a CSS shorthand string ("8px 16px"), or a { top, right, bottom, left } object. Keyword-valued fields (display, align*, flex*, …) decode straight into the bevy_ui/bevy_text enum they drive (see the keyword_fields! deserializers below); an unrecognized keyword warns and falls back to the bevy default. Grid tracks/placements likewise parse once at decode.

Fields

display: Option<Display>

box_sizing: Option<BoxSizing>

position_type: Option<PositionType>

overflow_x: Option<OverflowAxis>

overflow_y: Option<OverflowAxis>

scrollbar_width: Option<f32>

left: Option<Animatable<Length>>

right: Option<Animatable<Length>>

top: Option<Animatable<Length>>

bottom: Option<Animatable<Length>>

width: Option<Animatable<Length>>

height: Option<Animatable<Length>>

min_width: Option<Animatable<Length>>

min_height: Option<Animatable<Length>>

max_width: Option<Animatable<Length>>

max_height: Option<Animatable<Length>>

aspect_ratio: Option<Animatable<f32>>

align_items: Option<AlignItems>

justify_items: Option<JustifyItems>

align_self: Option<AlignSelf>

justify_self: Option<JustifySelf>

align_content: Option<AlignContent>

justify_content: Option<JustifyContent>

margin: Option<Rect>

padding: Option<Rect>

border: Option<Rect>

flex_direction: Option<FlexDirection>

flex_wrap: Option<FlexWrap>

flex_grow: Option<f32>

flex_shrink: Option<f32>

flex_basis: Option<Animatable<Length>>

gap: Option<Animatable<Length>>

row_gap: Option<Animatable<Length>>

column_gap: Option<Animatable<Length>>

grid_auto_flow: Option<GridAutoFlow>

grid_template_rows: Option<Vec<RepeatedGridTrack>>

CSS grid template ("repeat(3, 1fr)", "1fr 2fr 100px", "auto").

grid_template_columns: Option<Vec<RepeatedGridTrack>>

grid_auto_rows: Option<Vec<GridTrack>>

Auto-track sizing (grid-auto-rows/columns); no repeat().

grid_auto_columns: Option<Vec<GridTrack>>

grid_row: Option<GridPlacement>

Grid line placement ("1 / 3", "span 2", "2", "auto").

grid_column: Option<GridPlacement>

background_color: Option<Animatable<String>>

Hex background color (#rrggbb / #rrggbbaa). Animated via an interpolateColor binding ({ animated: … }).

border_color: Option<Animatable<BorderColorSpec>>

Border color: a single CSS color (all four sides) or a { top, right, bottom, left } object (omitted sides → transparent). Only the single-color form is animatable (the binding drives all four sides); per-side { animated } wrappers warn and are ignored.

border_radius: Option<Rect>

Corner radii; same forms as the other rect fields (corners are top-left, top-right, bottom-right, bottom-left).

outline: Option<OutlineSpec>

box_shadow: Option<BoxShadowList>

filter: Option<FilterChain>

Layer-based, subtree-wide filter chain (see crate::filters): one { name, params } object (a 1-element chain) or an ordered array of them (chain order = pass order). Omitted params take the filter’s CSS-shorthand default (a bare grayscale is full grayscale, while brightness/contrast/saturate default to identity). params stays an untyped map at decode; it is validated later against the registered filters (FilterRegistry). A non-empty chain promotes the node to a composited layer (see crate::layer); hover/press/focus variants carry the field too (with a transition the swap eases — see crate::filters). A chain carried only by a variant still promotes eagerly at mount — promotion is presence-based across the base style and every variant, so the layer exists before the first hover.

backdrop_filter: Option<FilterChain>

Layer-based backdropFilter chain — same wire shape as filter (one { name, params } or an ordered array, validated against the same registry), but it filters what is rendered behind the node (v1: the camera’s post-processed 3D frame — no UI) and draws the result as an opaque quad under the node’s own content. A non-empty chain promotes (presence union across base + variants, like filter). Unsetting it demotes, so an eased removal needs an identity entry left in the base chain (same snap rule as filter).

background_gradient: Option<GradientList>

Background gradient(s); one gradient or a layered list. bevy paints it over backgroundColor (CSS background-image semantics): an opaque gradient hides the color (fallback); transparent stops reveal it.

border_gradient: Option<GradientList>

Border gradient(s); one gradient or a layered list. Painted over borderColor (needs a border width to be visible).

background_image: Option<BackgroundImageSpec>

Background image: painted over backgroundColor and backgroundGradient, under the node’s content (bevy’s fixed per-node paint order). src is an asset path, or { texture } naming a render target registered in crate::portal::RenderTargets. Never affects layout (the layout-driving Auto image mode is never emitted). Ignored — with a devtools warning — on image/canvas/portal (their ImageNode belongs to the element) and surface.

z_index: Option<i32>

global_z_index: Option<i32>

Global stacking order: lifts the node (and its subtree) into the UI’s top-level stack, escaping the parent stacking context. Unlike z_index, which only reorders a node among its siblings.

focus_policy: Option<FocusPolicy>

Pointer pass-through. Maps to bevy::ui::FocusPolicy. "pass" lets pointer interaction fall through to nodes behind this one; "block" makes it capture interaction so siblings, the 3D scene, and portals behind it don’t receive it. When unset the default is element-dependent (set in the reconciler): a <button> blocks, a <node>/container passes.

cursor: Option<String>

Mouse cursor shown while the pointer is over this node (CSS cursor). A system keyword (winit’s SystemCursorIcon) or a custom-cursor name registered via ReactUiPlugin::cursor; the name is resolved (registry first, so a custom cursor can override a system keyword) onto the window’s CursorIcon by crate::cursor::drive_cursor_icon. Like font_family, a raw name resolved at drive time. Absent → the node contributes no cursor (its ancestor’s or the default arrow shows).

transform: Option<Transform>

Static transform (translate/scale/rotate). Mirrors the animated transform channels; written to UiTransform. With a transition a change eases instead of snapping.

transform3d: Option<Transform3d>

3D perspective transform, applied to the subtree’s rendered result at composite time (group semantics, like opacity/filter). Presence — even an identity {} — promotes the subtree to a composited layer (see crate::layer); the captured texture is drawn as one quad through the matrix, so animating it never re-captures. Unlike transform (which stays main-world and bakes into the capture), this never touches layout, and ancestor clips clamp the transformed result. With a transition a change eases field-wise.

opacity: Option<Animatable<f32>>

Opacity in 0.0..=1.0, multiplied into the alpha of the background (and text) color. With a transition a change eases. On a node with children (unless group_alpha is false) the subtree is instead promoted to a composited layer and the value applies once to the whole group — see crate::layer.

group_alpha: Option<bool>

Whether opacity on a node with children fades the subtree as a group (composited layer) rather than folding into each node’s own colors. Default true (web semantics); false opts out of layer promotion for perf-sensitive spots, keeping the per-node fold. no_overlay: a hover/ press variant must not be able to flip promotion.

cache: Option<LayerCache>

Layer-cache hint. "always" force-promotes the subtree to a composited layer (see crate::layer) so its capture is cached and re-rendered only when its content changes — the will-change pattern for static or transform/opacity-animated subtrees. "never" also force-promotes, but the capture re-runs every frame — for content written outside the dirt tracking’s sight (live <portal> targets, app-owned textures). "auto" (or absent, the default) promotes only when another rule does (today: opacity). no_overlay: a variant must not flip promotion.

transition: Option<Transition>

CSS-like per-channel transition timing. Present → a change to transform / opacity / backgroundColor (via re-render or hover/press) animates over time using the same driver/easing engine as { animated } bindings, rather than snapping. See [crate::transition].

scrollbar: Option<ScrollbarSpec>

Visible scrollbar for an overflow: scroll node: "none" (default) / "default" / a styled object. Present → the reconciler stamps a crate::scrollbar::ScrollbarConfig and the shell spawns Bevy’s headless scrollbar widget over the container. Pure-serde, module-owned.

color: Option<Animatable<String>>

Hex text color. Animated via an interpolateColor binding.

font_size: Option<FontSize>

Font size: a number (logical pixels) or a unit string ("24px", "2vw", "1.5rem"). See FontSize.

font_weight: Option<FontWeight>

"thin" | "light" | "normal" | "medium" | "semibold" | "bold" | "black" or a numeric weight string (e.g. "600").

font_family: Option<String>

Registered font-family name to render this text with (see the plugin’s default_font/font config). Unknown or unset → the configured default font.

text_align: Option<Justify>

Horizontal alignment of the text block (<text> root only): "left" | "center" | "right" | "justify" | "start" | "end".

line_height: Option<LineHeightSpec>

Line height. A bare number is a multiple of the font size; { "px": n } is an absolute pixel height. Unset → bevy’s default (1.2× the font size).

letter_spacing: Option<LetterSpacingSpec>

Letter spacing. A bare number is logical pixels; { "rem": n } is a multiple of the font size. Unset → no extra spacing.

text_shadow: Option<TextShadowSpec>

A single drop shadow behind the text (<text> root only).

line_break: Option<LineBreak>

How the text wraps when it overflows its bounds (<text> root only): "wordBoundary" (default) | "anyCharacter" | "wordOrCharacter" | "noWrap".

Trait Implementations

impl Clone for Style

fn clone(&self) -> Style

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for Style

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl Default for Style

fn default() -> Style

Returns the “default value” for a type.

impl<'de> Deserialize<'de> for Style

fn deserialize<__D>(__deserializer: __D) -> Result<Self, __D::Error>

where __D: Deserializer<'de>,

Deserialize this value from the given Serde deserializer.