Css properties as falsie values in react

Question

I'm looking for the answer to the question how should I use conditional styles with conditional operators.

What code example would be the best? Can we use non css values?

margin: isOpen ? '10px' : undefined

margin: isOpen ? '10px' : 'initial'

Is it okay to use it in that way? (so we pass 'undefined' and 'null' as a css property)

margin: isOpen ?? '10px'

and one more (so we pass every falsie value)

margin: isOpen && '10px'

or maybe this

margin: isOpen ? '10px' : ''

As context we can say we wanna use it in react style porp, or in styled-components

Make sense to use 'initial' in that case because it is css supported value for this property. But is it bad to use: '', false, null, undefined, none? — programmer
– programmer, Commented Mar 20, 2024 at 15:33

Sanket Mundada · Accepted Answer · 2024-04-14 11:30:41Z

1

I personally prefer using a separate class for isOpen state and conditionally applying the className rather than using inline styles. The classnames package can be used for conditionally applying the class to the element.

However, if you want to use the alternative approach, I find the following method simpler and easier to understand:

 <p style={{ color: "dodgerblue", ...(isOpen ? { margin: "10px" } : {}) }}>
    ...
 </p>

Sandbox Example

answered Apr 14, 2024 at 11:30

Sanket Mundada

113 bronze badges

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

Collectives™ on Stack Overflow

Css properties as falsie values in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related