反應如何在一個元素中內聯樣式不同的對象

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

在timeOfDay周圍添加一個span ，然后timeOfDay傳遞樣式

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