Styles from styled-components are not reflecting on preview

Technical Questions
1

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

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.

2

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

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

3

@tomMisson yes the Heading component does show up under the custom code component.
image

4

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

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

@tomMisson Yes, this works. :pray:

1 Like
6

Glad to hear that worked!

1 Like