синтаксис styled-components v4 для анимации css

Question

Я недавно обновил свои стилевые компоненты с v3 до v4. Приведенная ниже строка анимации css $ {jquery} будет работать на v3, но не может заставить ее работать на v4.

const StyledGlide = styled(Glide)`
    animation: ${ifProp("isOpen", `0.8s ${slideInRightAnimation}`, `0.9s ${fadeOutLeftAnimation} forwards`)};
`

Я получаю эту ошибку: Кажется, вы интерполируете объявление ключевого кадра (ifGrPa) в строку без тегов. Это было поддержано в styled-components v3, но больше не поддерживается в v4, поскольку ключевые кадры теперь вводятся по требованию. Пожалуйста, оберните вашу строку в помощник css``, который гарантирует, что стили введены правильно. См. https://www.styled -components.com / docs / api # css

Я пытался изменить синтаксис, но, похоже, не понял его правильно.

const StyledGlide = styled(Glide)`
    animation: ${ifProp("isOpen", css\`0.8s ${slideInRightAnimation}`, `0.9s ${fadeOutLeftAnimation} forwards\`)};
`

Answer 1

Хорошо, так что это решило проблему. Спасибо, Делис, была только анимация: в твоих высказываниях пропало.

import styled, { css } from "styled-components"

const StyledGlide = styled(Glide)`
    ${ifProp(
        "isOpen",
        css`
            animation: 0.8s ${slideInRightAnimation};
        `,
        css`
            animation: 0.9s ${fadeOutLeftAnimation} forwards;
        `
    )}