Как экспортировать стилизованный компонент из файла?

Question

Когда я использую следующий стилизованный компонент

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;

как

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

Я получаю ошибку

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...

Что я делаю не так?

Answer 1

Как сказал Мэтт Маккатчен в своем комментарии, присвойте styled.div непосредственно переменной CarouselContainer:

import styled from 'styled-components';

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

export default CarouselContainer;