有条件地添加一个CSS值

Question

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

是否有另一种优化代码的解决方案？

Answer 1

你可以这样做

<div id={condition ? 'sub-container' : 'sub-container-2'}></div>

Answer 2

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

这可以通过将所有全局样式应用于两个标记，将额外样式应用于具有指定类的标记。

Answer 3

为什么不使用额外的课程？

.sub-container-extra { justify-content: flex-end; }

在组件中

<div id="sub-container" className={condition && 'sub-container-extra'}></div>

Answer 4

也许不是复制类，你可以自定义主要的

#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>