How to combine inline style and external import const style in JSX React

user_18520398 0
Viewed 156

So for example I want to do something like this:

const style = {
  color: 'red'
}

<div style={style + { width: '10%' }}>Hello</div>

To combine the style in the constant and inline in JSX.

jsx reactjs
1 Answers

You want to use spread syntax (...) to combine objects.

const style = {
    color: 'red'
};

<div
    style={{
        // Spread out previous `style` properties
        ...style,
        width: "10%",
    }}
>
    Hello
</div>
user_8642330
Related