如何让两个单词出现在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>