Реагируйте, как встраивать стили разных объектов в один элемент

В React я пытаюсь применить стиль только к одному объекту внутри элемента, такого как h1, вот пример

const Header = () => {

  const firstName = "Ashraf";
  const lastName = "Fathi";
  const date = new Date();
  const hours = date.getHours();

  let timeOfDay;
  const styles = {
    color: ""
  }
  if (hours < 12) {
    timeOfDay = "Good morning"
    styles.color = "#ff474d"
  }
  else if (hours >= 12 && hours < 17) {
    timeOfDay = "Good afternoon"
    styles.color = "#7b5dff"
  }
  else {
    timeOfDay = "Good night"
    styles.color = "#01ff41"
  }
  return(
    <div>
          <h1 className = "navbar" style = {styles}>{timeOfDay} {`${firstName} ${lastName}`} It is currently {hours} clock</h1>
    </div>
    )
}

то, что я пытаюсь сделать, это применить стиль только к timeOfDay, так как я могу этого добиться? Я пробовал разные подходы, но все сводится к тому, что style = {} влияет на весь элемент, который не ищет. заранее спасибо