Question

我正在尝试创建一个FlexContainer，该容器可以接受任何数量的媒体查询，并在每个媒体查询上附加一些道具。

这是我要使用的方式：

<FlexContainerExperimental mediaQueries={[{minWidth: props.theme.minWidthMediumDevice, direction: 'column'}]}>
    {textPosts}
</FlexContainerExperimental>

这就是我实现FlexContainerExperimental

的方式

interface FlexContainerSettings {
    alignItems?: string;
    direction?: string;
    width?: string;
    justifyContent?: string;
}

interface FlexContainerExperimentalProps extends FlexContainerSettings {
    // tslint:disable-next-line:no-any
    children: any;
    className?: string;
    mediaQueries?: MediaQuery[];
}

interface MediaQuery extends FlexContainerSettings {
    minWidth: string;
}

function FlexContainerExperimental(props: FlexContainerExperimentalProps) {
    const Container = styled.div`
        display: flex;

        ${props.alignItems && `justify-content: ${props.alignItems}`};
        ${props.direction && `justify-content: ${props.direction}`};
        ${props.width && `justify-content: ${props.width}`};
        ${props.justifyContent && `justify-content: ${props.justifyContent}`};

        ${props && props.mediaQueries && 
                props.mediaQueries.map((mediaQuery: MediaQuery) => `
                    @media all and (min-width: ${mediaQuery.minWidth}) {
                        direction: ${mediaQuery.direction};
                        alignItems: ${mediaQuery.alignItems};
                        width: ${mediaQuery.width};
                        justify-content: ${mediaQuery.justifyContent};
                    };
            `)};

    `;
    return (
        <Container className={props.className}>
            {props.children}
        </Container>
    );
}

export { FlexContainer, FlexContainerExperimental };
export * from './FlexItem';

我没有收到任何错误，但是媒体查询没有任何作用，并且似乎根本没有呈现为CSS。

我在做什么错了？

Answer 1

您要返回Array。确保返回模板文字：

${({ mediaQueries }) => {
    let templateLiteral = ``;
    mediaQueries.forEach(mediaQuery => {
        templateLiteral += `
            @media all and (min-width: ${mediaQuery.minWidth}) {
                direction: ${mediaQuery.direction};
                alignItems: ${mediaQuery.alignItems};
                width: ${mediaQuery.width};
                justify-content: ${mediaQuery.justifyContent};
            };
        `;
    });
    return templateLiteral;
}}

https://stackoverflow.com/a/53220251/2248347

可以在样式化组件标签中循环道具吗？

1 个答案: