如何在React中动态改变文本的颜色？

Question

我想在一天中的特定时间更改标题的颜色。（例如晚上为蓝色，早晨为绿色......） 为此，我尝试使用 inline-css（在 js 文件内）。

我的CSS文件：

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

我的js文件：

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

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

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

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

我知道这是一个很容易问的问题，但任何答案都会有帮助。谢谢你。

Answer 1

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

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 方法中包含所有代码。也许首先尝试一下反应教程：https://reactjs.org/tutorial/tutorial.html

Answer 2

我建议使用不同的类而不是内联 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
  );
}

Answer 3

您可以通过不同的方式做到这一点，其中之一如下：

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;
}

Answer 4

我认为你没有使用 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 小时我就会改变颜色”。

Answer 5

你可以这样做：

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')
);

Answer 6

您可以尝试使用以下代码：

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")
);

Answer 7

你可以试试这个：-

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

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

let greetings;
const customStyle = {
  color: ""
  };

 if (curretnTime < 12) {
  greetings = "Good Morning";
  customStyle.color = "red";
 } else if (curretnTime < 18) {
  greetings = "Good Evening";
  customStyle.color = "green";
 } else {
  greetings = "Good Night";
  customStyle.color = "blue";
 }

 ReactDOM.render(<h1 className="heading" style={customStyle} > 
 {greetings}</h1>, document.getElementById("root"));

Answer 8

//YOu can try this

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

const today = new Date();
const hour = today.getHours();

const text = {
  color: "",
  backgroundColor: ""
};

let greet;

if (hour >= 0 && hour < 12) {
  greet = "Good morning";
  text.color = "orange";
  text.backgroundColor = "blue";
} else if (hour >= 12 && hour < 16) {
  greet = "Good Afternoon";
  text.color = "blue";
  text.backgroundColor = "orange";
} else if (hour >= 16 && hour < 19) {
  greet = "Good Evening";
  text.color = "white";
  text.backgroundColor = "purple";
} else {
  greet = "Good Night";
  text.color = "grey";
  text.backgroundColor = "pink";
}

ReactDOM.render(<h1 style={text}>{greet}</h1>, document.getElementById("root"));

Answer 9

// Import necessary libraries
import React from "react";
import ReactDOM from "react-dom"; // Use the correct casing for ReactDOM

// Get the current date and time
const myDate = new Date();
const hrs = myDate.getHours(); // Get the current hour

let greet; // Variable to hold the greeting message
let color; // Variable to hold the color for inline styling

// Determine the greeting and corresponding color based on the current hour
if (hrs < 12) { 
    // "Good Morning!" if before 12:PM and color: red
    greet = "Good Morning!";
    color = { color: "red" };
} else if (hrs >= 12 && hrs < 18) { // "Good Afternoon!" if between 12:PM and 6:PM and color: green
    greet = "Good Afternoon!";
    color = { color: "green" };
} else { // "Good Evening!" if between 6:PM and midnight and color: blue
    greet = "Good Evening!";
    color = { color: "blue" };
}

// Render the greeting in the DOM
ReactDOM.render(
    <div className="heading">
        <h1 style={color}>{greet}</h1>
    </div>,
    document.getElementById("root") // Ensure there's an element with id 'root' in your index.html
);