Component wrapper
Table of contents
Component wrapper
Components registered with the Experiences SDK are encapsulated within a <div>
element that acts as a wrapping container.
Styles generated by Experiences are applied to this wrapping container rather than the component itself, preventing additional styles from interfering with your component's styling.
If you prefer styles from the Experiences UI to be applied directly to your component, you can disable the wrapping container.
Disable the wrapping container
You can disable the wrapping container by setting the wrapComponent
option to false
during component registration.
If you choose to disable the container, ensure your component handles the required props for Experiences as described in component requirements.
import { defineComponents } from '@contentful/experiences-sdk-react';
import { Example, exampleDefinition } from './components/Example';
defineComponents([
{
component: Example,
definition: exampleDefinition,
options: {
wrapComponent: false
}
}
]);
Change the wrapping container tag
The wrapping container tag can be changed by setting the wrapContainer
option in the component registration.
import { defineComponents } from '@contentful/experiences-sdk-react';
import { Example, exampleDefinition } from './components/Example';
defineComponents([
{
component: Example,
definition: exampleDefinition,
options: {
wrapContainer: 'span'
}
}
]);