Skip to main content

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.

<T>(defaultValue: T) => <T, >
required

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

<T>(conditions: , value: T) => <T, >
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.

Was this section helpful?

Import the Style helper

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

The following conditions are supported for conditional styles.

Multiple conditions can be set on the same when method.

NameTypeDescription
"hover"trueThis condition is met when an element is hovered on with the cursor (mouse pointer).
"focus"trueThis 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.
Was this section helpful?

This section provides examples of 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.

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.

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.

Was this section helpful?

Default Style With Conditions

React

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