如何在React中为CSS属性设置多个属性值？

在React的内联样式中，给单个CSS属性设置多个值的方式和原生CSS完全一致——直接把多个值用逗号分隔后作为属性值即可。

以你提到的animation属性为例，要同时设置fadein 0.5s和fadeout 0.5s 3s两个动画规则，只需要在样式对象的animation属性中把这两个值用逗号拼接起来：

import React from 'react';

function App() {
  // 直接用逗号分隔多个动画值
  const myStyle = {
    animation: 'fadein 0.5s, fadeout 0.5s 3s'
  };

  return (
    <>
      <div className='app' style={myStyle}>
      </div>
    </>
  )
}

export default App;

需要注意的是，React内联样式里的CSS属性大多采用驼峰命名（比如backgroundColor对应原生CSS的background-color），但像animation这类本身没有连字符的属性，直接使用原名即可。多个值的解析逻辑和原生CSS保持一致，逗号分隔的多个规则会被依次应用到元素上。

内容的提问来源于stack exchange，提问作者Rahul Mahto