Combining CSS and custom CSS properties inline on a react component

Question

I need to pass custom CSS properties inline to a React component (Google Model Viewer in this instance),combined with more run-of-the-mill styles (background width, height etc.). There's quite a lot of questions on using custom properties inline with react, but I couldn't see one for specifically combing the properties with other styles.

I have the styles here, with the commented out style being an example of the custom property.

const styles = {
      width: "100%",
      height: "100%",
      background: this.props.background,
     // "--progress-bar-height": this.props.progressBarHeight
 };

The const gets passed into rendering the component:

return (
      <model-viewer
        style={styles}
      </model-viewer>

How do I combine the usual inline styles with the custom properties to add inline?

I tried adding it as a variable (as seen elsewhere on SO):

const progressBarHeight={ "--progress-bar-height": this.props.progressBarHeight };

But wasn't sure how to combine that with the {styles} . I tried longhand declaring each style and adding the variable to the list, but that didnt work either:

 style={{ background: styles.background, width: styles.width, height: styles.height, progressBarHeight }}

Any tips?

Sudhanshu Rai · Accepted Answer · 2021-01-25 13:31:15Z

4

You can simply use object spreading for this

style={{...styles, ...progressBarHeight }} // progressBarHeight = { "--customrvar" : '1px'}

Here's a working demo

answered Jan 25, 2021 at 13:31

Sudhanshu Rai

2,0691 gold badge11 silver badges21 bronze badges

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

Comments

isherwood · Accepted Answer · 2022-12-16 13:57:29Z

0

Shouldn't a simple object map work? Here is a sample code -

const styles = {
      width: "100%",
      height: "100%",
      background: "this.props.background",
      //"--progress-bar-height": "black"
 };
 
 const props = {
      "--progress-bar-height": "white"
 }
 
 for(let i in props)
 {
    styles[i] = props[i];   
 }
 
 for(let i in styles)
 {
    console.log(styles[i]);   
 }

And then the resulting combined style goes into props of your component.

edited Dec 16, 2022 at 13:57

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Jan 25, 2021 at 13:14

Hiren Desai

1,1012 gold badges12 silver badges38 bronze badges

Collectives™ on Stack Overflow

Combining CSS and custom CSS properties inline on a react component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related