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

我相信这就是您要找的： https://www.npmjs.com/package/apeman-react-style

您可以选择是否return它作为字符串文字或样式对象数据。

希望对您有所帮助！

Answer 2

这是一个非常简单的浏览器 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 3

你可以用 react-style-object-to-css

react-style-object-to-css

JSX css 内联样式

JSX css to inline styles

javascript

css

jsx

reactjs