Question

我正在编写一个简单的React组件，当鼠标指针位于组件上时，我会更改组件样式。我能够使我的组件工作，但我有两个几乎相似的样式表。一种样式用于onMouseOver，另一种用于onMouseOut事件。两个样式表之间的差异只有一行：border定义。

我想避免重复的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常量并在下降样式表中重新定义border属性？

Answer 1

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

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>

Answer 2

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={{...STYLE.BOX, ...(this.state.mouseOver ? STYLE.boxOver : STYLE.boxDefault)}} onMouseOver={...} onMouseOut={...}>
    ...
</div>

这必须有效

在React中扩展常见的CSS定义

2 个答案: