CODEWITHSUNDEEP
cssreactjsstyles
Lizz Parody
Lizz Parody

Reputation: 1765

React - How to pass clases and inline styles as props in

I used to have this and it worked fine:

<div className="right mr3 relative center" style={{ marginTop: -300, zIndex: 2 }}>

Now I need to pass that entire class and inline style as props,

tooltipClassName={"right mr3 relative center" style={{ marginTop: -300, zIndex: 2 }}}

And then call that class like this <div className={tooltipClassName}>

Maybe I need to use string interpolation or pass another prop as styles but I don't know.

Upvotes: 0

Views: 7067

Answers (1)

Mitch Lillie
Mitch Lillie

Reputation: 2407

Class & style are different HTML attributes, so string interpolation won't really work here. One option:

<SomeComponent tooltipClasses={'right mr3 relative center'} tooltipStyles={{ marginTop: -300, zIndex: 2 }} />

// inside of SomeComponent render:
<div className={this.props.tooltipClasses} style={this.props.tooltipStyles}>

Alternately you could write your own class with the z-index and margin values and add that class to the array

Upvotes: 2

Related Questions