# No-wrap attributes and styled-components

**URL:** <https://forum.builder.io/t/no-wrap-attributes-and-styled-components/3082>\
**Category:** Bugs\
**Tags:** styling, react, custom-components\
**Created:** [January 12, 2023, 11:09am UTC](https://forum.builder.io/t/no-wrap-attributes-and-styled-components/3082 "2023-01-12T11:09:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![edward-simpson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/edward-simpson/32/1894_2.png) [@edward-simpson](https://forum.builder.io/u/edward-simpson)\
**Post date:** [January 12, 2023, 11:09am UTC](https://forum.builder.io/t/no-wrap-attributes-and-styled-components/3082/1 "2023-01-12T11:09:54Z")

</div>

Currently, if you use the no-wrap flag on a custom component, and spread in the [builder.io](http://builder.io) attributes {…props.attributes}, these attributes exist as non-data attributes (e.g. `builder-id` instead of `data-builder-id`).

Because these properties are not standard/accepted HTML element attributes, they get stripped out by styled-components. In order to successfully use no-wrap with styled-components you have to set up custom property forwarding.

Generally as far as I’m aware it’s bad practice to create your own element attributes, and these should really be data attributes.

Are there any plans to correct this, or at least add a guide to docs so others don’t have to figure this out on their own? My TS fix:

```auto
import type React from "react";

import type { ThemedStyledFunction } from "styled-components";

import type { TBasicTheme } from "src/types/theme.types";

const builderIoAttributes: Array<string | number | symbol> = ["builder-id"];

type TForwardBuilderAttributesFunction<
  C extends keyof JSX.IntrinsicElements | React.ComponentType<unknown>,
  T extends object,
  O extends object = Record<string, any>,
  A extends keyof never = never
> = (
  element: ThemedStyledFunction<C, T, O, A>
) => ThemedStyledFunction<C, T, O, A>;

const forwardBuilderAttributes: TForwardBuilderAttributesFunction<
  keyof JSX.IntrinsicElements | React.ComponentType<unknown>,
  TBasicTheme
> = (element) =>
  element.withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) =>
      defaultValidatorFn(prop) || builderIoAttributes.includes(prop),
  });

export default forwardBuilderAttributes;

```

Usage:

```auto
export const Item = forwardBuilderAttributes(
  styled(LinkAtom)<{ ... customPropTypes }>
)(
  (customProps) => css``
);

```