How to fix "renderLink is not a function" errors?

Technical Questions
1

BuilderComponent accepts a renderLink function that allow the user to override all links rendered inside a builder content, this is especially helpful if you’d like to do client side routing for local links (like in next.js or gatsby)

You can run into this error when providing a non-function value to the prop, this is how you pass the renderLink function:

// MyCustomLink should accept props of type `React.AnchorHTMLAttributes` 
<BuilderComponent renderLink={ props => <MyCustomLink {...props} /> } ...
2

Hi! I’ve noticed that when we use the wrapper link, it always adds 3 css rules:

    display: flex;
    pointer-events: auto;
    cursor: pointer;

However if you remove the link URL, it leaves the component like this:

    display: flex;
    pointer-events: auto;
}

I’m trying to use a custom renderLink component but I would like that when we use this wrapper link it doesn’t add those rules. They are added by className so the only way to override them is using inline style, but inline styles are not controlled by the builder editor styles tab.

3

Hi @luigiveoworld, what exactly are you trying to achieve by overriding these styles? Is there a specific use case?

If you are trying to override in your application you can also pass a className to your custom element and apply styling that way:

<BuilderComponent renderLink={ props => <MyCustomLink {...props} className="my-custom-class" /> }

Beyond that, any default styling from Builder can always be changed or overwritten within the Visual Editor itself, or you can customize styles in the Edit JS + CSS tab within the Data tab to add custom, targeted styles across your an entire content block. Try one of those options and let us know if you still encounter any issues

4

Hi Tim, there is not a specific use case. The only issue I have and it is a bit annoying is when you add the link sometimes it breaks the layout if you have more than 1 children under the link element because of the display flex rule and you have to manually remove this style every time you use it.

And yeah we can override the styles by adding our custom class but we want to keep the ability to edit within builder visual editor as well.

Is there any use case to set the display flex rule by default?

5

@luigiveoworld Depending on what exactly you mean here, this is definitely possible. If you add a custom class to a component, you should still be able edit that component in the visual editor without issue or use the CSS editor to target that custom class for styling in the custom CSS window

1 Like
6

@luigiveoworld I just wanted to let you know, we actually have a new field in the advanced settings to remove all default styling. This will affect all components, not only specific components like links, but try it out and see if that works for you

To remove the default settings just go to Builder.io: Drag and drop page builder and CMS and click Advanced Settings > Editor > Turn off 'Use default styles '

1 Like