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

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

我想在 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>

解决方法

最简单的方法是使用 df['datetime'] = pd.to_datetime(datetime.datetime(df['Year'],df['Month'],df['Day'],df['Hour'])) df['datetime'] = pd.to_datetime(df['Year'],df['Hour']) df['datetime'] = pd.datetime(df['Year'],df['Hour']) 标签插入内联样式：

<style>

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);