反应如何在一个元素中内联不同对象的样式
反应如何在一个元素中内联不同对象的样式
提问于 2019-02-07 00:08:02
在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={}影响了整个元素，而不是正在寻找的元素。提前感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-07 00:09:19
在timeOfDay周围添加一个span，然后将样式传递给它
<div>
<h1 className="navbar"><span style={styles}>{timeOfDay}</span> {`${firstName} ${lastName}`} It is currently {hours} clock</h1>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54557851
复制相关文章
相似问题
腾讯云开发者
