CODEWITHSUNDEEP
javascriptcssreactjs
Alex
Alex

Reputation: 1420

Styled-components using a prop inside of a keyframe animation

What's the proper way of using props inside of animation: ${styledKeyFrame} ${props.myProps}?

The issue:

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;

Upvotes: 1

Views: 951

Answers (1)

Batuhan Wilhelm
Batuhan Wilhelm

Reputation: 142

I think the error is happening when you try to use KeyFrames inside the ${props => } syntax.

I don't know which version of styled-components you are using but I think this should work;

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

Upvotes: 1

Related Questions