我可以使用自定义CSS对JSX错误隐藏逗号吗

Question

我的网站的一个组件基于以下.js代码：

items.add( 
`field-${field.id()}`, 
<div className="Mason-Field Form-group"> 
<label> 
{field.icon() ? <>{icon(field.icon())} </> : null} 
{field.name()} 
</label> 
,<div className="FormControl Mason-Inline-Answers">{answer_list}</div>, 
</div> 
); 

在网站中，逗号在JSX中的字面意思就像它们在输出中一样。当超脚本转换为JSX时，这一定是一个疏忽。请参阅下面的测试帖子屏幕截图。

我个人无法在.js级别修复此问题。有没有办法在CSS级别中隐藏逗号？

测试姿势

Answer 1

方法是将外部div的字体颜色设置为透明，然后在子级上再次设置：

.Mason-Field.Form-group { color: transparent }
.Mason-Field.Form-group > * { color: initial }

根据您的其他类FormControl和Mason-Inline-Answers，您可能需要更加具体。