在Home.js中我有以下代码
<div id="sub-container">
...
</div>
在home.css中我有以下代码
#sub-container {
... // A lot of css
}
我想有条件地向css添加一个值。我找到的唯一解决方案是创建一个新块并在那里添加行
{condition ? (<div id="sub-container">) : (<div id="sub-container-2">)
#sub-container-2 {
... // A lot of css
justify-content: flex-end;
}
是否有另一种优化代码的解决方案?
答案 0 :(得分:2)
你可以这样做
<div id={condition ? 'sub-container' : 'sub-container-2'}></div>
答案 1 :(得分:0)
在sub-container-2
元素中添加一个类:
<div id="sub-container-2" class="justify-flex-end">
添加样式如下:
#sub-container, #sub-container-2 {
/* ... A lot of css */
}
#sub-container-2.justify-flex-end {
justify-content: flex-end;
}
这可以通过将所有全局样式应用于两个标记,将额外样式应用于具有指定类的标记。
答案 2 :(得分:0)
为什么不使用额外的课程?
.sub-container-extra { justify-content: flex-end; }
在组件中
<div id="sub-container" className={condition && 'sub-container-extra'}></div>
答案 3 :(得分:0)
也许不是复制类,你可以自定义主要的
#sub-container {
... // A lot of css
... // A lot of css
... // A lot of css
}
#sub-container.special {
justify-content: flex-end;
}
然后只是有条不紊地将类添加到div:
<div id="sub-container" {condition ? 'class="special"' : ''}></div>