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

另一种选择是将其定义为：

import styled from 'styled-components';

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

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

export { CarouselContainer, StyledComponent };

并使用它：

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

Answer 2

正如Matt McCutchen在评论中所说，将styled.div直接分配给CarouselContainer变量：

import styled from 'styled-components';

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

export default CarouselContainer;

如何从文件中导出样式化的组件？

2 个答案: