theme in keyframes

[maxime4000]

So we have a TS Styled component app with working theme. Writing this would work :

const Div = styled.div`
  background-color: ${({theme}) => theme.blue};
  color: ${({theme}) => theme.red};
`;

I want to animate a background-color for a "skeleton" component. So I'm expecting this to work, but theme doesn't work...

const skeletonAnimation = keyframes`
  0% {
    background-color: ${({ theme }) => theme.blue};
  }
  100% {
    background-color: ${({ theme }) => theme.red};
  }
`;

const Div = styled.div`
  animation: ${skeletonAnimation} 1s linear infinite alternate;
`;

I tried this below, but it doesn't work at all...

const anim = props => keyframes`...`;
const Div = styled.div`
  animation: ${anim} 1s linear infinite alternate;
`;

There is no documentation on this so maybe I don't know how to do this, but it seem like a no brainer that this should work.

Using version : 5.3.11

Also curious, should I do something like this for adding typing support ?

// styled.d.ts
declare module "react" {
	interface Attributes {
		css?: CSSProp<DefaultTheme>;
		// keyframes: KeyframesProp<DefaultTheme>;
	}
}

[User6531]

You can create a separate function to set the animation. The function will receive the props of the styled component from which the function will access the direction prop.

const setSkeletonAnimation = (theme) => {
  const animation = keyframes`
    0% {
       background-color: ${theme.blue};
    }
    100% {
       background-color: ${theme.red};
    }
  `;
    
  return css`
       animation: ${animation} 1s linear infinite alternate;
  `;
};


const Div = styled.div`
   ${({ theme }) => setSkeletonAnimation(theme)};
`;

[quantizor]

keyframes does not receive props or theme — it is evaluated at definition time, not render time. To use theme values in keyframes, wrap the keyframes definition inside a function interpolation within the styled component:

const Div = styled.div`
  animation: ${({ theme }) => keyframes`
    0% { background-color: ${theme.blue}; }
    100% { background-color: ${theme.red}; }
  `} 1s linear infinite alternate;
`;

This way the keyframes call happens during render when theme is available via props.