React inline style with const and "text"

Question

I want to have a const style and inline hardcoded style to my element lets say I have this:

const style = {
    cursor: "pointer",
    border: "2px solid #b1b1b1",
    borderRadius: "8px",
    padding: "0px 10px 0px 10px",
    backgroundColor: "green"
}

But I also want additional style to the element lets say width

<div style={style{width: "20%"}}>test</div>

This is not working, how can I achieve this?

Answer 1

You can use the spread syntax for assigning your styles.

<div style={{...style, ...{width: "20%"}}}>test</div>

const style = {
    cursor: "pointer",
    border: "2px solid #b1b1b1",
    borderRadius: "8px",
    padding: "0px 10px 0px 10px",
    backgroundColor: "green"
}

const newStyles = {...style, ...{width: "20%"}};

console.log(newStyles);