在 React 中扩展常见的 CSS 定义

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 常量并在下降样式表中重新定义边框属性？

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 定义

Extend common CSS definition in React

css

stylesheet

reactjs