在React中扩展常见的CSS定义

问题描述 投票:1回答:2

我正在编写一个简单的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属性?

css css3 reactjs react-native stylesheet
2个回答
1
投票

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>

这必须奏效


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>
© www.soinside.com 2019 - 2024. All rights reserved.