# Styles from styled-components are not reflecting on preview

**URL:** <https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690>\
**Category:** Technical Questions\
**Created:** [February 3, 2022, 9:05am UTC](https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690 "2022-02-03T09:05:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![pradeep](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@pradeep](https://forum.builder.io/u/pradeep)\
**Post date:** [February 3, 2022, 9:05am UTC](https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690/1 "2022-02-03T09:05:02Z")

</div>

I want to use my existing react components which uses styled-components library for styling, but it is ignoring styles done using styled-components library

**Reproducible code example**

```auto
import { Builder } from "@builder.io/react";
import styled from 'styled-components';

const Heading = (props: any) => <h1 style={{ color: props.color }}>{props.title}</h1>;
export const StyledHeading = styled(Heading)`
    height: 400px;
`;

Builder.registerComponent(StyledHeading, {
  name: "Custom Heading",
  inputs: [
    {
      name: "title",
      type: "text",
      defaultValue: 'I am b heading!'
    },
    {
      name: "color",
      type: "color",
      defaultValue: 'black'
    }
  ],
});

```

height: 400px is not getting applied when I see the preview. Can I make this work somehow ? We want to use all of our existing react components instead of styling them again in [builder.io](http://builder.io).

---

<div class="post-metadata">

**Author:** ![tomMisson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/tommisson/32/962_2.png) [@tomMisson](https://forum.builder.io/u/tomMisson)\
**Post date:** [February 3, 2022, 9:59am UTC](https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690/2 "2022-02-03T09:59:18Z")

</div>

Hi there @pradeep, we currently use custom code components in Builder with styled components… Are you getting the heading component showing in Builder under the custom code components section?

![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b299472f230f2d0902b8c78687941673bd523fcf.png)

If not, then it will be something wrong with your initialisation with builder.

---

<div class="post-metadata">

**Author:** ![pradeep](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@pradeep](https://forum.builder.io/u/pradeep)\
**Post date:** [February 3, 2022, 10:48am UTC](https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690/3 "2022-02-03T10:48:18Z")

</div>

@tomMisson yes the Heading component does show up under the custom code component.  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/861dc6393bfaffc684cf8787d526aed013fbb56b.png)

---

<div class="post-metadata">

**Author:** ![tomMisson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/tommisson/32/962_2.png) [@tomMisson](https://forum.builder.io/u/tomMisson)\
**Post date:** [February 3, 2022, 12:43pm UTC](https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690/4 "2022-02-03T12:43:54Z")

</div>

Cool! So can I suggest you try this implementation of your styled component over your current one and see if that works?

```auto
const Heading = (props: any) => <StyledHeading style={{ color: props.color }}>{props.title}</StyledHeading>;
export const StyledHeading = styled.h1`
    height: 400px;
`;

```

---

<div class="post-metadata">

**Author:** ![pradeep](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@pradeep](https://forum.builder.io/u/pradeep)\
**Post date:** [February 3, 2022, 3:06pm UTC](https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690/5 "2022-02-03T15:06:03Z")

</div>

@tomMisson Yes, this works. 🙏

---

<div class="post-metadata">

**Author:** ![tomMisson](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/tommisson/32/962_2.png) [@tomMisson](https://forum.builder.io/u/tomMisson)\
**Post date:** [February 3, 2022, 3:39pm UTC](https://forum.builder.io/t/styles-from-styled-components-are-not-reflecting-on-preview/1690/6 "2022-02-03T15:39:07Z")

</div>

Glad to hear that worked!