---
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: unstable
api_name: checkout_ui_extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper.txt
---

# 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.

Default Style With Conditions

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 `small` breakpoint.

Simple Condition

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 `loose` on hover.

Conditionally hiding content

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.

### 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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/blocklayout)

[ComponentBlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/blocklayout)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/blockspacer)

[ComponentBlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/blockspacer)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/blockstack)

[ComponentBlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/blockstack)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/grid)

[ComponentGrid](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/grid)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/griditem)

[ComponentGridItem](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/griditem)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/image)

[ComponentImage](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/image)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/inlinelayout)

[ComponentInlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/inlinelayout)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/inlinespacer)

[ComponentInlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/inlinespacer)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/inlinestack)

[ComponentInlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/inlinestack)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/list)

[ComponentList](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/list)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/pressable)

[ComponentPressable](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/pressable)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/scrollview)

[ComponentScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/scrollview)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/skeletonimage)

[ComponentSkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/skeletonimage)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/view)

[ComponentView](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/view)