Styled-компоненты, использующие опору внутри ключевой анимации

Question

Как правильно использовать реквизит внутри анимации: $ {styledKeyFrame} $ {props.myProps}?

Проблема:

import styled from 'styled-components';
const KeyFrameTest = styled.keyframes`
    from { opacity: 0; }
    to { opacity: 1; }
`;

const StyledComponent = styled.div`
 animation: ${KeyFrameTest} 2s 4s ease-in; /* works */
 animation: ${props => `${KeyFrameTest} 2s ${props.delay} ease-in`}; /* ERROR */
 animation: ${props => `${styled.css`{KeyFrameTest}}` 2s ${props.delay} ease-in`}; /* ERROR */
`;

const PureComponent = () => <StyledComponent delay="3s" />;
export default PureComponent;

Answer 1

Я думаю, что ошибка возникает, когда вы пытаетесь использовать ключевые кадры внутри синтаксиса ${props => }.

Я не знаю, какую версию стилевых компонентов вы используете, но я думаю, что это должно работать;

animation: ${KeyFrameTest} 2s ${props => props.delay} ease-in