如何在React的同一行中顯示兩個單詞？

Question

我之前有以下代碼：

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

在render（）方法中，我有這個：

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

在用戶界面中看起來像這樣

現在，我更改了代碼以考慮項目的顏色，如下所示：

  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>