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

此方法还可以自我验证CSS规则，并与任何已知的供应商前缀和非标准属性一起使用。

Answer 2

我相信这是你正在寻找的： https://www.npmjs.com/package/apeman-react-style

您可以选择是否将其作为字符串文字或样式对象数据返回。

希望有所帮助！

Answer 3

您可以使用react-style-object-to-css

进行制作

react-style-object-to-css

JSX css内联样式

3 个答案: