Disabling Default Styling

FAQs
, ,
1

By default, Builder applies default styles to components that are added to a page or section within Builder. These default styles help keep things in order and looking tidy, and are usually low impact, but sometimes users want to have complete control over all styling on the page and as a result want to completely remove these defaults.

In order to do this, simply they head to Builder.io: Drag and drop page builder and CMS and click Advanced Settings > Editor > Turn off 'Use default styles '

As well as you can turn off the 'Use default margins ' to remove any automatically applied 20px margins.

Screen Shot 2022-01-04 at 5.21.41 PM
Screen Shot 2022-01-04 at 5.21.41 PM885×301 33.3 KB

Try it out and let us know if you have any further questions!

2

Is there a place I can add my own default styles?

3

Hello @caleb.nelson,

You can use the data model to create a theme with your own global default styles that can be utilized in all the builder content using data binding, for reference you can refer to the below link

Builder also allows you to add your own default styles to your custom components when registering them with Builder. This is done through the defaultStyles property in the registerComponent() method.

Here’s a quick overview of how to achieve this:

  1. Register your component: You can specify default styles through the defaultStyles property when registering your component.
  2. Set default styles: Provide a CSS-in-JS object to the defaultStyles property.

Below is an example of how you can register a component with default styles:

import React from 'react';
import { Builder } from '@builder.io/react';

// Define your custom component
const HelloWorldComponent = (props) => (
  <div style={props.styles}>
    <h1>{props.text}</h1>
  </div>
);

// Register the component with Builder and include default styles
Builder.registerComponent(HelloWorldComponent, {
  name: 'Hello World',
  defaultStyles: {
    textAlign: 'center',
    fontSize: '20px',
    color: 'blue',
  },
  // Define inputs if needed
  inputs: [{ name: 'text', type: 'string', defaultValue: 'Hello, Builder!' }],
});