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

General
, , , ,
1

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

Снимок экрана 2023-02-15 в 19.53.52
Снимок экрана 2023-02-15 в 19.53.521306×916 74.1 KB

1 Like
2

Hello,

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?

Thanks!

3

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
4

Hello, has there been any progress on this topic? Additionally, I need to add default styles to the component, with different values for each breakpoint. If there have been any developments, please let me know. Thank you!

5

For those who keep having issues, the fix is not applied AFAIK so my current approach is the following:

  • Create your custom component with you general default styles (the ones that don’t depend on a specific breakpoint)
  • On the visual editor drag you custom component to a page, click on “Data” panel, then “Code” and then “Edit JSX”
  • In that code window you are able to use Mitosis Styling Feature and the cool thing is that you can use any custom media query (you are not limited to the 3 options that builder has)
  • Once you are done with the editing, click save and create a template of that custom component
  • Now instead of using the custom component, use the template and you will be no longer limited!

Don’t know if there’s a better approach but is the one I got working.

6

Yes, you can use different styles for breakpoints in defaultStyles when registering a component in Builder.io. Instead of defaultStyles, you should define styles within defaults using responsiveStyles. Here’s an example:

registerComponent(MyComponent, {
  name: "MyComponent",
  inputs: [
    // your inputs here
  ],
  defaults: {
    responsiveStyles: {
      large: {
        color: "red",
        fontSize: "20px",
      },
      medium: {
        color: "blue",
        fontSize: "16px",
      },
      small: {
        color: "green",
        fontSize: "12px",
      },
    },
  },
});

This approach allows you to specify different styles for large, medium, and small breakpoints :rocket: