用const和“ text”反应内联样式

Question

我想对我的元素使用const样式和内联硬编码样式，可以这样说：

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

但是我也希望元素的其他样式可以说宽度

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

这行不通，我该如何实现？

Answer 1

您可以使用spread语法来分配样式。

<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);