Conditionally add one CSS value

Question

In Home.js I have the following code

<div id="sub-container">
...
</div>

and in home.css I have the following code

#sub-container {
    ... // A lot of css
}

I want to conditionally add one value to the css. The only solution I found is to create a new block and add the line there

{condition ? (<div id="sub-container">) : (<div id="sub-container-2">)

#sub-container-2 {
    ... // A lot of css
justify-content: flex-end;
}

Is there another solution to optimize the code?

patelarpan · Accepted Answer · 2018-05-02 09:00:54Z

2

you can do this

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

answered May 2, 2018 at 9:00

patelarpan

8,1513 gold badges23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexandre Annic · Accepted Answer · 2018-05-02 09:06:50Z

0

Why don't use an extra class ?

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

And in component

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

answered May 2, 2018 at 9:06

Alexandre Annic

10.9k6 gold badges44 silver badges54 bronze badges

Simon Brahan · Accepted Answer · 2018-05-02 09:05:09Z

0

Add a class to your sub-container-2 element:

<div id="sub-container-2" class="justify-flex-end">

Add set the styles as follows:

#sub-container, #sub-container-2 {
    /* ... A lot of css */
}

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

This works by applying all your global styles to both tags, and the extra style to only the tag with the specified class.

answered May 2, 2018 at 9:05

Simon Brahan

2,1042 gold badges15 silver badges23 bronze badges

zolv · Accepted Answer · 2018-05-02 09:08:59Z

0

Maybe instead of duplicating class, You can customize the main one

#sub-container {
    ... // A lot of css
    ... // A lot of css
    ... // A lot of css
}

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

And then just add the class to the div conditionally:

<div id="sub-container" {condition ? 'class="special"' : ''}></div>

answered May 2, 2018 at 9:08

zolv

1,9402 gold badges27 silver badges43 bronze badges