反应如何内嵌在一个元素风格不同的对象

在阵营我试图应用样式只喜欢这里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，所以我怎么能做到这一点？我曾尝试不同的方法，但是这一切都归结到风格= {}影响这是不是在寻找整个元素。提前致谢

添加span周围timeOfDay再通的样式，

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

反应如何内嵌在一个元素风格不同的对象

在阵营我试图应用样式只喜欢这里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，所以我怎么能做到这一点？我曾尝试不同的方法，但是这一切都归结到风格= {}影响这是不是在寻找整个元素。提前致谢

添加span周围timeOfDay再通的样式，

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