Возможно зациклить реквизит в стиле тега компонента?

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