如何在JSX React中组合内联样式和外部导入常量样式

Question

例如，我想做这样的事情：

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

在JSX中组合常量和内联中的样式。

Answer 1

您希望使用排列语法(...(来组合对象。

const style = {
color: 'red'
};
<div
style={{
// Spread out previous `style` properties
...style,
width: "10%",
}}
>
Hello
</div>