我可以使用自定义 CSS 隐藏 JSX 错误中的逗号吗？答案

【问题标题】：Can I hide commas from a JSX bug using custom CSS?我可以使用自定义 CSS 隐藏 JSX 错误中的逗号吗？
【发布时间】：2021-07-12 00:18:13
【问题描述】：

我网站的一个组件基于以下 .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 级别隐藏逗号？

Test pose

【问题讨论】：

标签： javascript html css jsx

【解决方案1】：

做法是将外层div的字体颜色设置为透明，然后在children上重新设置：

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

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

【讨论】：