Не получается переделать css в styled components

Question

Не работает. Ошибка:

It seems you are interpolating a keyframe declaration (dgsNKJ) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper which ensures the styles are injected correctly.

const SliderMain = () => {

  // Example

const keyframePopUp = keyframes`
  from {
    opacity: 0;
  }
  to {
    transform: translateY(3rem);
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  25% {
    transform: translateY(3rem);
  }
`;

const animateStyles = css`
  div {
    animation: ${ keyframePopUp } 6s  ease-in-out infinite;
    opacity: 1;
  }   
`;


  const swiperParams = {
    ContainerEl: 'figure',
    slideActiveClass: `${ animateStyles }`,
    slidesPerView: 1,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    autoplay: {
      delay: 5000
    }
  };

  return (
    <Swiper { ...swiperParams } >
      { slideData.map ( ( item, idx ) =>
        <Slide to={ '#' } key={ idx } background={ item.url }>
          <PopUp>
            <PopUpText>{ item.popUp.info }</PopUpText>
            <PopUpTitle>{ item.popUp.title }</PopUpTitle>
            <PopUpText>{ item.popUp.text } </PopUpText>
            <PopUpButton>button</PopUpButton>
          </PopUp>
        </Slide>
      ) }
    </Swiper>
  );
};

export default SliderMain;

Это рабочий вариант

import './css'

const SliderMain = () => {

  // Example


  const swiperParams = {
    ContainerEl: 'figure',
    slideActiveClass: 'animate',
    slidesPerView: 1,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    autoplay: {
      delay: 5000
    }
  };

  return (
    <Swiper { ...swiperParams } >
      { slideData.map ( ( item, idx ) =>
        <Slide to={ '#' } key={ idx } background={ item.url }>
          <PopUp>
            <PopUpText>{ item.popUp.info }</PopUpText>
            <PopUpTitle>{ item.popUp.title }</PopUpTitle>
            <PopUpText>{ item.popUp.text } </PopUpText>
            <PopUpButton>button</PopUpButton>
          </PopUp>
        </Slide>
      ) }
    </Swiper>
  );
};

export default SliderMain;

css

.animate div  {
    animation: popUp 6s ease 1;
    opacity: 1;
}

@keyframes popUp {
    from {
        opacity: 0;
    }
    to {
        transform: translateY(3rem);
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    25% {
        transform: translateY(3rem);
    }
}

БЛОГ НА HUSL

Не получается переделать css в styled components

Ответы (0 шт):