Can I use different style for breakpoints in defaultStyles (registerComponent())?

Hello everybody. When I register a custom component, I use the defaultStyles. Can I use different style for breakpoints? (desktop, tablet and mobile).

Large breakpoint is used by default. But if i use defaultStyles: { large:{ marginBottom: "64px", } - it doesn’t work

1 Like


I am facing the same issue and would also like to know how to solve it, please.

Just like OP, when I try to place keys like large: { ... }, small: { ... }, it doesn’t work as expected. Instead of setting default styles, the entire contents of defaultStyles are placed into the responsiveStyles.large property of the component. This results in large: { large: { ... } ...}.

Is there a way to set default styles for tablet and mobile breakpoints?


Hi there,

Thank you for bring that to our attention! I’ve advised our product team and they’ll be working on implementing a fix for this.

In the meantime, as a workaround, you can always set CSS properties to set CSS styles for different breakpoints.

1 Like