如何让两个单词出现在 React 的同一行？

Question

我之前有这个代码：

projectName: project.get('name') === 'default' ? 'No Project' : project.get('name')

在 render() 方法中我有这个：

<div className='c-card__projects'>
  Project: {card.projectName}
</div>

它在 UI 中看起来像这样

现在我更改了代码以考虑项目的颜色，如下所示：

  projectName: <div style={{color: project.get('color')}}>
    {project.get('name') === 'default' ? 'No Project' : project.get('name')}
  </div>

现在看起来像这样：

如何才能像以前一样显示在同一行，而不是两行（我只是想改变颜色）？

Answer 1

尝试更改为内联样式的跨度。

projectName: 
<span style={{color: project.get('color')}}>
    {project.get('name') === 'default' ? 'No Project' : project.get('name')}
</span>