在React中扩展公共CSS定义

我正在编写一个easy React组件，当鼠标指针指向组件时，我会更改组件样式。我能够使我的组件工作，但我有两个样式表，几乎是相似的。一种样式用于

onMouseOver

，另一种样式用于

onMouseOut

事件。两个样式表之间的区别只有一行：

边框

定义

我希望避免重复的CSS定义，并希望根据以下内容简化我的CSS：

• 一个描述组件外观的基本样式表
• 一种样式扩展onMouseOver事件的基本样式（仅包含边框）
• onMouseOut事件的另一种扩展基本样式（仅包含边框）

这是我想要使用的样式表定义：

const STYLE = {
  box: {
     '-moz-border-radius': '15px',
     '-moz-box-shadow': '#B3B3B3 13px 13px 13px',
     '-webkit-box-shadow': '#B3B3B3 13px 13px 13px',
     'background-color': '#E3A20B',
     'border-radius': '15px',
     'border': '5px solid #FFFF00',
     'box-shadow': '#B3B3B3 13px 13px 13px',
     'float': 'left',
     'height': '215px',
     'margin': '15px',
     'width': '150px'
  },

  boxMouseOver: {
    'border': '5px solid #000000',
  },

  boxMouseOut: {
    'border': '5px solid #FFFF00',
  }
}

这是我的工作代码，使用两个样式表：

<div style={this.state.mouseOver ? STYLE.boxOver : STYLE.boxDefault} onMouseOver={...} onMouseOut={...}>
    ...
</div>

...

这就是我想做的，但不幸的是，它不起作用：

<div style={STYLE.box, this.state.mouseOver ? STYLE.boxMouseOver : STYLE.boxMouseOut} onMouseOver={...} onMouseOut={...}>
    ...
</div>

...

---

向组件添加两种不同样式的正确方法是什么，或者如何扩展STYLE.box常量并重新定义下降样式表中的边界属性？

您可以使用对象析构函数模式保存样式的公共部分，并根据需要更改该对象中所需的任何属性

const commonStyle = {
  box: {
    '-moz-border-radius': '15px',
    '-moz-box-shadow': '#B3B3B3 13px 13px 13px',
    '-webkit-box-shadow': '#B3B3B3 13px 13px 13px',
    'background-color': '#E3A20B',
    'border-radius': '15px',
    'border': '5px solid #FFFF00',
    'box-shadow': '#B3B3B3 13px 13px 13px',
    'float': 'left',
    'height': '215px',
    'margin': '15px',
    'width': '150px'
  }
}

const boxMouseOverStyles = {...commonStyle, ...{'border': '5px solid #000000'}};
const boxMouseOutStyles = {...commonStyle, ...{'border': '5px solid #FFFF00'}};

<div style={this.state.mouseOver ? boxMouseOverStyles : boxMouseOutStyles} onMouseOver={...} onMouseOut={...}>
    ...
</div>

const commonStyle={
方框：{
“-moz边界半径”：“15px”，
“-moz盒阴影”：“#B3B3 13px 13px 13px”，
“-webkit盒阴影”：“B3 13px 13px 13px 13px”，
“背景色”：“E3A20B”，
“边界半径”：“15px”，
“边框”：“5px实心#FFFF00”，
“盒子阴影”：“B3 13px 13px 13px”，
‘float’：‘left’，
“高度”：“215px”，
“边距”：“15px”，
“宽度”：“150px”
}
}
const-boxMouseOverStyles={…commonStyle，{'border'：'5px solid#000000'}；
const-boxMouseOutStyles={…commonStyle，{'border'：'5px-solid 35; FFFF00'}；
...

const STYLE={
方框：{
“-moz边界半径”：“15px”，
“-moz盒阴影”：“#B3B3 13px 13px 13px”，
“-webkit盒阴影”：“B3 13px 13px 13px 13px”，
“背景色”：“E3A20B”，
“边界半径”：“15px”，
“边框”：“5px实心#FFFF00”，
“盒子阴影”：“B3 13px 13px 13px”，
‘float’：‘left’，
“高度”：“215px”，
“边距”：“15px”，
“宽度”：“150px”
},
boxMouseOver：{
“边框”：“5px实心#000000”，
},
boxMouseOut：{
“边框”：“5px实心#FFFF00”，
}
}
...

感谢您的回复，但“…commonStyle”部分似乎不起作用。boxMouseOverStyles和boxMouseOutStyles仅包含边框定义。剩下的就不见了。这是非常棘手的语法，特别是如果我把它与Java；）不管怎么说，它很有魅力。请在示例中添加缺少的“}”字符。谢谢