CODEWITHSUNDEEP
cssreactjs
ssalc
ssalc

Reputation: 25

Conditionally add one CSS value

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?

Upvotes: 1

Views: 211

Answers (4)

zolv
zolv

Reputation: 1902

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>

Upvotes: 0

Alexandre Annic
Alexandre Annic

Reputation: 10788

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>

Upvotes: 0

Simon Brahan
Simon Brahan

Reputation: 2086

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.

Upvotes: 0

patelarpan
patelarpan

Reputation: 8021

you can do this

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

Upvotes: 2

Related Questions