Can I define and use a CSS at-rule in react.js component?

Question

I have an animation that I want to use in a react.js component.

@keyframes pulse {
    0% {
        background-color: #94A3B8;
    }

    50% {
        background-color: #CBD5E1;
    }

    100% {
        background-color: #94A3B8;
    }
}

I can put it in a CSS file and import it into the react component. then i can reference it like this:

<div style={{animation: "pulse"}}></div>

I'm curious if animation can be defined in the component. something like this:

const animation = `
@keyframes pulse {
    0% {
        background-color: #94A3B8;
    }

    50% {
        background-color: #CBD5E1;
    }

    100% {
        background-color: #94A3B8;
    }
}
`

<div style={{ keyframes: animation }}></div>

thank. I tried it but didn't work. also, I'm not using material-UI. — Arman Zanjani
– Arman Zanjani, Commented Mar 14, 2021 at 16:40

0stone0 · Accepted Answer · 2021-03-14 16:50:35Z

1

The easiest way is to use the <style> tagg to insert inline styling:

class ExampleClass extends React.Component {
  render() {
    return (
      <div>
        <h2>{'Test Inline Animation'}</h2>
        <div className='animate'>{'WhoeeeHoeee'}</div>
        <style>
            {`
                .animate {
                    animation-name: pulse;
                    animation-duration: 4s;
                }
                @keyframes pulse {
                    0% {
                        background-color: #94A3B8;
                    }

                    50% {
                        background-color: #CBD5E1;
                    }

                    100% {
                        background-color: #94A3B8;
                    }
                }
            `}
        </style>
      </div>
    );
  }
}

ReactDOM.render(<ExampleClass />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

answered Mar 14, 2021 at 16:50

0stone0

45.5k6 gold badges54 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arman Zanjani Over a year ago

thanks. I think that is the answer. but I have to sure the style tag is inside the head tag. maybe this can help other people: gist.github.com/yamadayuki/f1ea9ccacad7f1c140457b5877fb54cc

Collectives™ on Stack Overflow

Can I define and use a CSS at-rule in react.js component?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related