您应该使用内联样式，例如：

import React from "react";
import ReactDOM from "react-dom";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

let timeOfDay = 'evening';   // not used

let timeOfDayColor = 'blue';
let timeOfDayMessage = 'Good Evening';

if (curretnTime < 12 && curretnTime >= 0) {
   timeOfDay = 'morning';

   timeOfDayColor = 'green';
   timeOfDayMessage = 'Good Morning';

} else if (curretnTime >= 12 && curretnTime <= 18) {
   timeOfDay = 'afternoon';

   timeOfDayColor = 'purple';
   timeOfDayMessage = 'Good Afternoon';
}

ReactDOM.render(
    <div>
      <h1 className="heading" style={{backgroundColor: timeOfDayColor}} >{timeOfDayMessage}</h1>
    </div>,
    root
);

style={{backgroundColor: timeOfDayColor}}是覆盖CSS样式的内联样式：https://www.w3schools.com/react/react_css.asp
但是，你应该真正使用组件，而不是把所有代码都放在ReactDOM.render方法中。也许可以先试试react教程：https://reactjs.org/tutorial/tutorial.html

我建议使用不同的类而不是内联css。

.heading {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

.heading.morning {
  color: green;
}

.heading.afternoon {
  color: purple;
}

.heading.night {
  color: blue;
}

if (currentTime < 12 && currentTime >= 0) {
  ReactDOM.render(
    <div>
      <h1 className="heading morning">Good Morning</h1>
    </div>,
    root
  );
} else if (currentTime >= 12 && currentTime <= 18) {
  ReactDOM.render(
    <div>
      <h1 className="heading afternoon">Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div>
      <h1 className="heading night">Good Evening</h1>
    </div>,
    root
  );
}

你可以用不同的方法来做，其中之一如下：
JS文件

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();
if (curretnTime < 12 && curretnTime >= 0) {
  ReactDOM.render(
    <div className="morning">
      <h1>Good Morning</h1>
    </div>,
    root
  );
} else if (curretnTime >= 12 && curretnTime <= 18) {
  ReactDOM.render(
    <div>
      <h1>Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div className="evening">
      <h1>Good Evening</h1>
    </div>,
    root
  );
}

CSS文件

h1 {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

.morning {
  color: green;
}

.evening {
  color: blue;
}

我认为您没有使用inline-css -To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.，但这只是“定义”。
不管怎么说，你正在做的事情是不正确的，你应该创建一个组件（见：https://reactjs.org/docs/react-component.html），其中包含颜色更改逻辑（请参见：https://reactjs.org/docs/faq-state.html#what-does-setstate-do-你可以把颜色保存在state中）。然后你可以添加componentDidMount方法，在那里你可以添加setInterval-所以你基本上可以设置“每X小时我会改变颜色”。

你可以这样做：

import React from 'react';
import ReactDOM from 'react-dom';

const time = new Date().getHours();
let greeting;
let color = {};

if (time <= 12) {
  greeting = 'Good morning';
  color.color = 'red';
} else if (time > 12 && time <= 18) {
  greeting = 'Good afternoon';
  color.color = 'green';
} else {
  greeting = 'Good night';
  color.color = 'blue';
}

ReactDOM.render(
  <h1 className="heading" style={color}>
    {greeting}
  </h1>,

  document.getElementById('root')
);

import React from "react";
import ReactDOM from "react-dom";

const currentDate = new Date();
//const hour = 19; // anything b/w 0 - 24 to check
const hour  = currentDate.getHours();

let greeting = "Good Evening";
let colorStyle = { color: "blue" };
if (hour >= 0 && hour <= 12) {
  greeting = "Good Morning";
  colorStyle = { color: "red" };
} else if (hour >= 12 && hour <= 18) {
  greeting = "Good Afternoon";
  colorStyle = { color: "green" };
}
ReactDOM.render(
  <div>

      <h2 style={colorStyle}>{greeting}</h2>

  </div>,
  document.getElementById("root")
);