Composition

Composition in Fluentic Style happens in three places.

Builder composition

const base = style({
  borderRadius: 6,
});

const card = style()
  .merge(base)
  .hover({
    transform: 'translateY(-1px)',
  });

Use this for shared standalone style fragments.

Scope composition

const theme = style.scope([
  baseTheme,
  compactTheme,
]);

Scopes can contain other scope items and slot overrides.

Render composition

<button css={[css.root, isLoading && css.loading, props.css]} />

This is the right place for conditionals that depend on render state.

Prefer the right layer

Need	Use
A reusable component part	style.slot
A visual fragment	style
A component theme	style.scope
A one-off element override	css prop
A render-time conditional class	css={[condition && item]}