javascript - JSX css 到内联样式

Question

我正在使用 React，我需要能够获取一个 css 对象文字并将其转换为一个字符串。 React 会自动为添加到样式标签的样式对象执行此操作。 React 或其他库中是否有可用于将对象字面量转换为 css 字符串的函数？

例如，我需要一个看起来像这样的文字:

{
  fontSize: '4em',
  zIndex: 2,
  marginLeft: '-.5em'
}

并将其转换为 css 字符串:

"font-size: 4em; z-index: 2, margin-left: -.5em"

完成这项工作最好的工具是什么？

Answer 1

这是一个非常简单的浏览器 ES5 转换例程:

function o2s(o){ 
  var elm=new Option; 
  Object.keys(o).forEach(function(a){elm.style[a]=o[a];}); 
  return elm.getAttribute("style"); 
}

// test/usage:
o2s({
  fontSize: '4em',
  zIndex: 2,
  marginLeft: '-.5em'
});

// == "font-size: 4em; z-index: 2; margin-left: -0.5em;"

这种方法还可以 self 验证 CSS 规则，并适用于任何已知的 vendor 前缀和非标准属性。