---
title: StyleHelper
description: >-
  This is a helper for authoring conditional values for property styles.


  Write complex conditional styles based on one or more conditions, such as
  viewport sizes and interactive states, in a concise and expressive way.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/utilities/stylehelper
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/utilities/stylehelper.md
---

# Style​Helper

This is a helper for authoring conditional values for property styles.

Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.

## StyleHelper

* default

  \<T>(defaultValue: T) => StylesConditionalStyle\<T, StylesBaseConditions>

  required

  Sets an optional default value to use when no other condition is met.

* when

  \<T>(conditions: StylesConditions, value: T) => StylesConditionalStyle\<T, StylesBaseConditions>

  required

  Adjusts the style based on different conditions. All conditions, expressed as a literal object, must be met for the associated value to be applied.

  The `when` method can be chained together to build more complex styles.

### StylesConditionalStyle

* conditionals

  An array of conditional values.

  ```ts
  StylesConditionalValue<T, AcceptedConditions>[]
  ```

* default

  The default value applied when none of the conditional values specified in \`conditionals\` are met.

  ```ts
  T
  ```

```ts
export interface StylesConditionalStyle<
  T,
  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: StylesConditionalValue<T, AcceptedConditions>[];
}
```

### StylesConditionalValue

* conditions

  The conditions that must be met for the value to be applied. At least one condition must be specified.

  ```ts
  AcceptedConditions
  ```

* value

  The value that will be applied if the conditions are met.

  ```ts
  T
  ```

```ts
export interface StylesConditionalValue<
  T,
  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}
```

### StylesBaseConditions

* focus

  ```ts
  true
  ```

* hover

  ```ts
  true
  ```

* resolution

  ```ts
  1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4
  ```

* viewportInlineSize

  ```ts
  { min: ViewportInlineSize; }
  ```

```ts
export interface StylesBaseConditions {
  viewportInlineSize?: {min: ViewportInlineSize};
  hover?: true;
  focus?: true;
  resolution?: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4;
}
```

### ViewportInlineSize

```ts
'extraSmall' | 'small' | 'medium' | 'large'
```

### StylesConditions

* focus

  ```ts
  true
  ```

* hover

  ```ts
  true
  ```

* viewportInlineSize

  ```ts
  { min: ViewportInlineSize; }
  ```

```ts
export interface StylesConditions {
  viewportInlineSize?: {min: ViewportInlineSize};
  hover?: true;
  focus?: true;
}
```

### Examples

* #### Import the Style helper

  ##### React

  ```tsx
  import {
    reactExtension,
    Style,
    View,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension('purchase.checkout.block.render', () => (
    <Extension />
  ));

  function Extension() {
    return (
      <View
        maxInlineSize={Style.default(200)
          .when({viewportInlineSize: {min: 'small'}}, 300)
          .when({viewportInlineSize: {min: 'medium'}}, 400)
          .when({viewportInlineSize: {min: 'large'}}, 800)}
      >
        Responsive Content
      </View>
    );
  }
  ```

  ##### JS

  ```js
  import {Style, View, extension} from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const view = root.createComponent(
      View,
      {
        border: 'base',
        padding: 'base',
        maxInlineSize: Style.default(200)
          .when({viewportInlineSize: {min: 'small'}}, 300)
          .when({viewportInlineSize: {min: 'medium'}}, 400)
          .when({viewportInlineSize: {min: 'large'}}, 800),
      },
      'Responsive Content',
    );

    root.appendChild(view);
  });
  ```

## Conditions

The following conditions are supported for conditional styles.

Multiple conditions can be set on the same `when` method.

| Name | Type | Description |
| - | - | - |
| `"hover"` | `true` | This condition is met when an element is hovered on with the cursor (mouse pointer). |
| `"focus"` | `true` | This condition is met when an element is clicked, tapped on or selected using the Tab key. |
| `viewportInlineSize` | `{min: "small" \| "medium" \| "large"}` | This condition is met when the device matches the minimum width. |

## Examples

This section provides examples of conditions.

### Examples

* #### Default Style With Conditions

  ##### Description

  Default styling can be combined with specific conditions. In this example, the Grid’s children will be stacked by default and side by side on viewports above the \<code>small\</code> breakpoint.

  ##### React

  ```tsx
  <Grid
    columns={Style.default('fill').when({viewportInlineSize: {min: 'small'}}, [
      '30%',
      '70%',
    ])}
  >
    <View>Content</View>
    <View>Content</View>
  </Grid>
  ```

* #### Simple Condition

  ##### Description

  Using simple conditional styling enables you to specify a styling change when a condition is met. In this example, the View’s padding will be \<code>loose\</code> on hover.

  ##### React

  ```tsx
  <Pressable
    onPress={() => alert('press')}
    border={Style.default(['base', 'dotted']).when(
      {viewportInlineSize: {min: 'small'}},
      ['base', 'dotted', 'none', 'base'],
    )}
  >
    Content
  </Pressable>
  ```

* #### Conditionally hiding content

  ##### Description

  Using the \`display\` property with conditional styles enables you to hide content for certain viewport sizes. In this example, the View will be hidden on small and above screen sizes.

  ##### React

  ```tsx
  <View
    display={Style.default('auto').when(
      {viewportInlineSize: {min: 'small'}},
      'none',
    )}
  >
    Content
  </View>
  ```

## Related

[Component - BlockLayout](blocklayout)

[Component - BlockSpacer](blockspacer)

[Component - BlockStack](blockstack)

[Component - Grid](grid)

[Component - GridItem](griditem)

[Component - Image](image)

[Component - InlineLayout](inlinelayout)

[Component - InlineSpacer](inlinespacer)

[Component - InlineStack](inlinestack)

[Component - List](list)

[Component - Pressable](pressable)

[Component - ScrollView](scrollview)

[Component - SkeletonImage](skeletonimage)

[Component - View](view)