Built-in styles

Enable built-in styles

You can enable ‌built-in style widgets that are out-of-the-box supported in sections and containers for your custom components.

To enable built-in styles, add builtInStyles attribute to the component definition as in the following example:

import type { ComponentDefinition } from '@contentful/experiences-sdk-react'

export const subheadingComponentDefinition: ComponentDefinition = {
  id: 'subheading',
  name: 'Subheading',
  category: 'Atoms',
  builtInStyles: ['cfMargin', 'cfPadding', 'cfBackgroundColor'],
  variables: {
    text: {
      displayName: 'Text',
      type: 'Text',
      defaultValue: 'Subheading',
    },
    variant: {
      displayName: 'Variant',
      type: 'Text',
      defaultValue: 'dark',
      group: 'style',
      validations: {
        in: [{ value: 'light' }, { value: 'dark' }]
      }
    }
  }
}

In the example above, by including the builtInStyles attribute in the definition we enable the following built-in styles:

• Margin;
• Padding;
• Background.

These built-in styles are displayed as options in the Design tab for a "Subheading" component. Once we select the desired styles, they are applied to the selected component:

Modifying the default value for built-in styles

Default values can be specified when using built-in styles in the component definition.

To use a built-in style with a custom default value:

1. Remove the built-in style's prop name from the builtInStyles array (otherwise the custom default value is ignored).
2. Add the built-in style to the variables object as a key-value pair, where key is the style prop name and value is the full variable definition which includes your new defaultValue. The following example demonstrates a component definition that uses the built-in styles for margin and padding. The margin widget will be enabled with the standard default value, while the padding widget is enabled with a custom default value of '0 10px 0 10px':

import type { ComponentDefinition } from '@contentful/experiences-sdk-react';

const exampleComponentDefinition: ComponentDefinition = {
  id: 'example',
  name: 'Example',

  // Enable the margin widget with its standard default value
  builtInStyles: ['cfMargin'],

  // Enable the padding widget with a custom default value
  variables: {
    cfPadding: {
      displayName: 'Padding',
      type: 'Text',
      group: 'style',
      defaultValue: '0 10px 0 10px'
    }
  }
};