React에서 두 단어를 같은 줄에 표시하려면 어떻게해야합니까?

질문

이전에이 코드가있었습니다.

projectName : project.get ( 'name') === 'default'? '프로젝트 없음': 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>

이제 다음과 같이 보입니다.

두 줄 대신 이전과 같은 줄에 표시하려면 어떻게해야합니까 (단지 색상을 변경하고 싶음)?

답변1

인라인 스타일을 위해 범위로 변경해보십시오.

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

 

 

 

 

출처 : https://stackoverflow.com/questions/48350311/how-can-i-make-two-words-appear-in-the-same-line-in-react