Как использовать свойства для определения радиального градиента с компонентами в стиле React?

Question

Я новичок в функциональном программировании, поэтому мне очень трудно понять, как используются реквизиты с плагином React, стилизованными компонентами.

Я пытаюсь сделать фон моего сайта (div)есть градиент.Есть два радиальных градиента, которые составляют этот градиент.Центр радиальных градиентов, а также цвет радиальных градиентов основаны на свойствах, которые передаются в стилизованный компонент.Вот как я пытался это сделать:

const backgroundChange = keyframes`
    0%, 100% {
        `background: ${(props) => radial-gradient(ellipse at props.xLeftPercent+'%' props.yLeftPercent)+'%', rgba(props.leftR + props.leftRStep * 0, props.leftG + props.leftGStep * 0, props.leftB + props.leftBStep * 0, 0.5), transparent),
                                  radial-gradient(ellipse at props.xRightPercent+'%' props.yRightPercent)+'%', rgba(props.rightR + props.rightRStep * 0, props.rightG + props.rightGStep * 0, props.rightB + props.rightBStep * 0, 0.5), transparent)`};
    50% {
        `background: ${(props) => radial-gradient(ellipse at props.xLeftPercent+'%' props.yLeftPercent)+'%', rgba(props.leftR + props.leftRStep * 50, props.leftG + props.leftGStep * 50, props.leftB + props.leftBStep * 50, 0.5), transparent),
                                  radial-gradient(ellipse at props.xRightPercent+'%' props.yRightPercent)+'%', rgba(props.rightR + props.rightRStep * 50, props.rightG + props.rightGStep * 50, props.rightB + props.rightBStep * 50, 0.5), transparent)`};
    }
`

Мне выдается сообщение об ошибке:

Unexpected token, expected ; (7:3)

Может ли кто-нибудь решить мою синтаксическую ошибку для меня, и не могли бы вы также предложить некоторыеруководства или документация, на которые стоит обратить внимание, чтобы помочь мне (документация по styleled-компонентам не очень помогла мне здесь)?