Once you have created the data for your app in the Schema, you will want to style it! Smart Builder provides a method called WithStyles to easily configure the style data that is passed to your app components.

This method is a HOC (high-order component) that’s included in your component and returns a new component with the styles configured in the Schema, meaning you can access your styles configuration and the class name representing those styles.

How the method arrives at your app.

How the method arrives at your app.

Schemas

To start, be sure to have your Working with a Schema object configuration ready.

For that, you’ll need to use the Schema method called newStyle and pass an object with the CSS keys and values you require to apply to your component. See this example:

type StyleConfigData = { [key in CSSKey]?: StyleParams };

const newStyle = (styles: StyleConfigData) => {...};

As shown above, the CSS keys you specified have to be valid (camel case key); otherwise, an error will appear in your console.

Here is another example:

Schema.object({
	...,
	styles: Schema.newStyle({
		marginTop: { breakpointSpecific: true },
		marginBottom: { breakpointSpecific: true },
		marginLeft: { breakpointSpecific: true },
		marginRight: { breakpointSpecific: true },
	})
});

This Schema will contain breakpointSpecific styles for margin information. This is denoted by the breakpointSpecific key.

styles property

Keep in mind that the styles property is explicitly reserved in the Schema.