Q: Conditionally render class or style variable I need to be able to set a color to a div if a variable containing a hex color value exists. If the variable doesn't have a value, it needs to use a class with backup styles.
const backgroundColor = backgroundColorVal;

<div className={backgroundColor ? backgroundColor : classes.divWrapperClass}>

What do I need to wrap the second backgroundColor value in to use this value inline?

A: If you want to set the background colour then.
Set using dynamic inline-style
<div style={{backgroundColor: backgroundColor}} />

You can shrink the above using object literal syntax if backgroundColor is the same name.
<div style={{backgroundColor}} />

Set using className
<div className={`${someCondition ? 'className if true' : 'className if false'}`} />


A: <div className={`${backgroundColor} ? ${backgroundColor} : ${classes.divWrapperClass}`}></div>

This would work

A: you want to use style if backgroundColor is defined and not use class, here a solution:
<div style={{backgroundColor}} className={!backgroundColor && classes.divWrapperClass}></div>


A: So I figured out that it was simply applying the inline style and class on the same div, because the inline style will override the class if available:
<div style={{ backgroundColor: backgroundColor }} className={classes.divWrapper}></div>

