Styled-Components - Pass Props / Theme to keyframes?

1
votes

Trying some stuff with styled-components & keyframes. It's about animating text color. It does work when using hex codes or css color names. However, I'd like to use the colors I've got defined in my theme. It doesn't seem to work though? How can I use props here?

const changeColor = keyframes`
    0% {
    color: ${props => props.theme.color.somecolor};
    }
    100% {
      color: ${props => props.theme.color.somecolor};
    }
`;

const ColorChange = css`
  -webkit-animation: ${changeColor} 3s infinite;
  -moz-animation: ${changeColor} 3s infinite;
  -o-animation: ${changeColor} 3s infinite;
  -ms-animation: ${changeColor} 3s infinite;
  animation: ${changeColor} 3s infinite;
`;

const ColorChangeComponent = styled.span`
  ${ColorChange}
`;
2
javascriptcssreactjscss-animationsstyled-components

2 Answers

5
votes

I suppose you could return your keyframes from a function that accepts the props as an argument:

const getChangeColor = (props) => keyframes`
  0% {
    color: ${props.theme.color.somecolor};
  }
  100% {
    color: ${props.theme.color.somecolor};
  }
`;

...and then pass the props in to the function when you call it:

const ColorChange = css`
  -webkit-animation: ${props => getChangeColor(props)} 3s infinite;
  -moz-animation: ${props => getChangeColor(props)} 3s infinite;
  -o-animation: ${props => getChangeColor(props)} 3s infinite;
  -ms-animation: ${props => getChangeColor(props)} 3s infinite;
  animation: ${props => getChangeColor(props)} 3s infinite;
`;

...or to simplify:

const ColorChange = css`
  -webkit-animation: ${getChangeColor} 3s infinite;
  -moz-animation: ${getChangeColor} 3s infinite;
  -o-animation: ${getChangeColor} 3s infinite;
  -ms-animation: ${getChangeColor} 3s infinite;
  animation: ${getChangeColor} 3s infinite;
`;

...or maybe even cut down on the number of function calls:

const ColorChange = css`
  ${props => {
    const changeColor = getChangeColor(props);
    return `
      -webkit-animation: ${changeColor} 3s infinite;
      -moz-animation: ${changeColor} 3s infinite;
      -o-animation: ${changeColor} 3s infinite;
      -ms-animation: ${changeColor} 3s infinite;
      animation: ${changeColor} 3s infinite;
    `;
  }}
`;

Hope this helps.

1
votes

I figured it out myself. The problem was that I did not pass props to keyframes, but also, that I did then try to access props like so: ${props => props.theme.brandColorOne}; it should, however in this case be accessed like so : ${props.theme.brandColorOne};

Here is a minimal example (taken from here):

import styled from 'styled-components';
import { keyframes } from 'styled-components';

const colorize = props => keyframes`
    0% {
        background-color: ${props.theme.brandColorOne};
    }

    100% {
        background-color: ${props.theme.brandColorTwo};
    }
`;

const Wrapper = styled.div`
    animation: ${colorize} 4s ease-in-out infinite;
`;