css - 我可以在 react.js 组件中定义和使用 CSS at-rule 吗？

Question

我有一个想要在 react.js 组件中使用的动画。

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

    50% {
        background-color: #CBD5E1;
    }

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

我可以把它放在一个 CSS 文件中，然后将它导入到 react 组件中。然后我可以这样引用它：

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

我很好奇是否可以在组件中定义动画。像这样的东西：

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

    50% {
        background-color: #CBD5E1;
    }

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

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

标签： cssreactjsanimationcss-in-js

Answer 1

最简单的方法是使用<style>tagg 插入内联样式：

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>