CODEWITHSUNDEEP
javascriptcssreactjscss-animationsstyled-components
R. Kohlisch
R. Kohlisch

Reputation: 2993

Styled-Components - Pass Props / Theme to keyframes?

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}
`;

Upvotes: 2

Views: 3170

Answers (2)

Steve Holgado
Steve Holgado

Reputation: 12071

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.

Upvotes: 11

R. Kohlisch
R. Kohlisch

Reputation: 2993

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;
`;

Upvotes: 3

Related Questions