# StyleHelper
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.
### Import the Style helper

```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
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);
});

```


## StyleHelper

### DocsStyle

### default
Sets an optional default value to use when no other condition is met.
### when
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

### default
The default value applied when none of the conditional values
specified in `conditionals` are met.
### conditionals
An array of conditional values.
### StylesConditionalValue

### conditions
The conditions that must be met for the value to be applied. At least one
condition must be specified.
### value
The value that will be applied if the conditions are met.
### StylesBaseConditions

### viewportInlineSize

### hover

### focus

### resolution

### StylesConditions

### viewportInlineSize

### hover

### focus

## Related
- [BlockLayout](blocklayout)
- [BlockSpacer](blockspacer)
- [BlockStack](blockstack)
- [Grid](grid)
- [GridItem](griditem)
- [Image](image)
- [InlineLayout](inlinelayout)
- [InlineSpacer](inlinespacer)
- [InlineStack](inlinestack)
- [List](list)
- [Pressable](pressable)
- [ScrollView](scrollview)
- [SkeletonImage](skeletonimage)
- [View](view)
## Examples
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.
### 
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.
### Default Style With Conditions

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

```


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

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

```