查找可将含伪类的CSS转换为React内联样式的JS工具库

React 原生传style属性的内联样式本身就不支持伪类、后代选择器、媒体查询这类复杂规则，你从Elementor接口拿到的带选择器、大括号的完整CSS块，不可能完全转成纯内联样式对象直接用，这和工具能力无关，是内联样式本身的设计限制。

• 最省事儿的方案是直接用成熟CSS-in-JS库的运行时解析能力，不用自己写转换逻辑：如果项目已经接了Emotion、Styled-Components这类库，直接调用库提供的css方法传入拿到的CSS字符串就行，库会自动处理选择器匹配、伪类交互、样式优先级，所有规则都能正常生效，不需要额外做转译。
• 如果不想引入太重的依赖，千万别自己写正则解析CSS——正则处理嵌套括号、转义字符、多层媒体查询的时候坑非常多，很容易出解析bug。可以用postcss-js做CSS到JS对象的解析，它能正确拆分大括号、分层梳理规则：解析完之后，把直接作用在当前元素的基础样式抽出来，转成驼峰格式的React内联样式对象传给元素的style属性；伪类、后代选择器、媒体查询这类内联样式hold不住的规则，生成一个唯一类名，把对应CSS插到页面全局的<style>标签里，给元素加上这个类名就行。这是现在绝大多数低代码平台处理远端下发CSS的通用方案，稳定性足够。
• 你之前用的style-to-js本来就是用来解析HTML标签上style属性里的单行样式字符串的，定位就不是处理带选择器、大括号的完整CSS规则块，不支持伪类和大括号是正常的，不匹配你的场景。如果只需要做基础CSS属性到React内联样式的转换，可以换css-to-style，它对标准CSS规则块的解析适配好很多。

内容的提问来源于stack exchange，提问作者Sarang Sami