Styled-Components - передать реквизиты / темы на ключевые кадры?

Question

Попробуем кое-что с styleled-компонентами и ключевыми кадрами. Речь идет о анимации цвета текста. Это работает при использовании шестнадцатеричных кодов или css имен цветов. Тем не менее, я хотел бы использовать цвета, которые я определил в своей теме. Кажется, это не работает? Как я могу использовать реквизит здесь?

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

Answer 1

Полагаю, вы могли бы вернуть свои ключевые кадры из функции, которая принимает реквизиты в качестве аргумента:

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

..., а затем передать реквизиты в функцию при вызове:

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

... или, чтобы упростить:

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

... или, возможно, даже сократить количество вызовов функций:

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

Надеюсь, это поможет.

Answer 2

Я понял это сам. Проблема заключалась в том, что я не передал props в keyframes, но также попытался получить доступ к реквизитам следующим образом: ${props => props.theme.brandColorOne}; он должен быть доступен, однако в этом случае он будет доступен следующим образом: ${props.theme.brandColorOne};

Вот минимальный пример (взято отсюда) :

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