Issue with Keyframes and Style Component

Author: SimeonCCreated Jun 28, 2016Updated Jan 29, 2020

Labelsenhancement

Hey not sure if this is my misunderstanding of the setup, but I can't seem to get keyframes to work inside the Style component. I've tried all sorts of variations of where to put the Style and StyleRoot tags and nothing seems to work.

Code Below:

bash

import React, {Component} from 'react';
import Radium, {Style} from 'radium';

class GlobalStyles extends Component {
    render() {
        return <div>
            <Style rules={{
                '.Overlay': {
                    animation: 'x 0.7s ease-in-out',
                    animationName: Radium.keyframes({
                        '0%': {
                            opacity: 0,
                            top: '-50%'
                        },
                        '100%': {
                            opacity: 1,
                            top: '0%'
                        }
                    }, 'overlayFadeIn')
                }
            }}/>
            {this.props.children}
        </div>;
    }
}
export default Radium(GlobalStyles);

ReactDOM.render(
            <StyleRoot>
                <GlobalStyles><div className="Overlay"></div></GlobalStyles></StyleRoot>, ...)

Expected Behavior

CSS in rendered style component to be:

.Overlay {
    animation: x 0.7s ease-in-out;
    animation-name: overlayFadeIn; /* or something similar - can't remember what it's supposed to be */
}

Actual Behavior

CSS in rendered style component is:

.Overlay {
    animation: x 0.7s ease-in-out;
    animation-name: [object Object];
}

Source: FormidableLabs/radium

View original on GitHub View discussion on GitHub