我可以使用自定义CSS隐藏JSX bug中的逗号吗？

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中的字面意思就像它们出现在输出中一样。当hyperscript被转换为JSX时，这一定是一个疏忽。请看下面的测试帖子截图。

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

Test pose

Answer 1

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

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

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