英文:
I am trying to use dynamic data to change and trigger classnames but it always only result to true despite data containing false. Any solution?
问题
我正在尝试根据三元类名动态更改样式。
我正在尝试根据workWrapper中的输入将背景更改为深色或浅色：
但是，我无法弄清楚为什么当我已经将workWrapper的值设置为false/true时，深色类名仍然没有被触发，它仍然是浅色的。
CSS：
.normColor{
background-color: #f3f3f3;
width: 100%;
height: 100vh;
margin: 0 auto;
}
.normColor .dark{
background-color: #232A4E;
width: 100%;
height: 100vh;
margin: 0 auto;
}
我已经尝试过调整组件，搜索类似问题并尝试搜索YouTube视频，但无法找到任何解决方案。
英文:
I am trying to dynamically change the styles based on ternary classnames.
I am trying to change the background to dark or light based on the input on the workWrapper in here:
The CSS:
.normColor{
background-color: #f3f3f3;
width: 100%;
height: 100vh;
margin: 0 auto;
}
.normColor .dark{
background-color: #232A4E;
width: 100%;
height: 100vh;
margin: 0 auto;
}
I already tried messing around with the component, searching for other similar issues to mine and trying to search youtube videos regarding it but I cannot find any solution.
答案1
得分: 0
你忘了解构你的 props。
尝试这样写：
const WorkSection = ({ workWrapper }) => {
return (
<div className={workWrapper ? 'normColor' : 'dark'}></div>
)
}
而且你在检查 props，看它是否为 null。它将始终为 true，因为组件总是具有 props。
英文:
You forget to de-structure your props.
try this :-
const WorkSection = ({workWrapper}) =>{
return(<div className={workWrapper?'normColor':'dark'}></div>)
}
And you checking props, if it is null or not. And it will always give you true, because components always have props
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论