CODEWITHSUNDEEP
typescriptstyled-components
user1283776
user1283776

Reputation: 21764

How to export styled component from a file?

When I use the following styled component

import styled from 'styled-components';

const CarouselContainer = () => {
    return styled.div`
        & .slick-prev, .slick-next {
            position: absolute;
            z-index: 1;
            top: 50%;
        }
        & .slick-prev::before, .slick-next::before {
            font-size: 35px;
        }
        & .slick-prev {
            left: 5%;
        }
        & .slick-next {
            right: 5%;
        }
        & .slick-slide {
            height: 371px;
            position: relative;
        }
        & .slick-slide img {
            height: 371px;
            object-fit: cover;
            object-position: 0 0;
        }
        @media all and (min-width: ${providedProps => providedProps.theme.minWidthMediumDevice}) {
            & .slick-slide {
                height: unset;
                position: unset;
            }

            & .slick-slide img {
                height: unset;
                object-fit: unset;
                object-position: unset;
            }
        }

        @media all and (min-width: ${providedProps => providedProps.theme.minWidthExtraLargeDevice}) {
            & .slick-slide {
                height: 557px;
                position: relative;
            }

            & .slick-slide img {
                height: 557px;
                object-fit: cover;
                object-position: 0 0;
            }
        }
    `;
};

export default CarouselContainer;

as

import CarouselContainer from './CarouselContainer';
...
<CarouselContainer>
...
</CarouselContainer>

I get the error

JSX element type
'StyledComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>,
HTMLDivElement>, any,
DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>' is
not a constructor function for JSX elements.   Property 'render' is
missing...

What am I doing wrong?

Upvotes: 7

Views: 14153

Answers (2)

Rondev
Rondev

Reputation: 928

Another option is to define it like:

import styled from 'styled-components';

const CarouselContainer = styled.div`
  // your styles
`;

const StyledComponent = styled.div`
  // your styles
`;

export { CarouselContainer, StyledComponent };

and use it:

import { CarouselContainer, StyledComponent } from './CarouselContainer';
...
<CarouselContainer>
...
</CarouselContainer>

Upvotes: 11

Emilio Venegas
Emilio Venegas

Reputation: 556

As Matt McCutchen said in his comment, assign the styled.div directly to the CarouselContainer variable:

import styled from 'styled-components';

const CarouselContainer = styled.div`
    ...
`;

export default CarouselContainer;

Upvotes: 1

Related Questions