In my project using React, I am attempting to apply styles only to a specific element within another element. Here is an example with an h1 tag:
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>
)
}
I've been trying different methods to target styling specifically to the 'timeOfDay' text only, but it seems that the style={} attribute affects the entire element. Does anyone have suggestions on how to achieve this? Thank you in advance!