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

Question

В 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 = {}, затрагивающему весь элемент, который не ищем.Заранее спасибо

Answer 1

Добавьте span вокруг timeOfDay и затем передайте ему стиль

 <div>
      <h1 className="navbar"><span style={styles}>{timeOfDay}</span> {`${firstName} ${lastName}`} It is currently {hours} clock</h1>
</div>