代码之家 › 专栏 › 技术社区 › zappee

在React中扩展通用CSS定义

stylesheet reactjs css

zappee · 技术社区 · 8 年前

我正在编写一个简单的React组件,当鼠标指针指向组件时,我会更改组件样式。我能够使我的组件工作,但我有两个几乎相似的样式表。一种样式用于 onMouseOver 另一个用于 onMouseOut 事件这两个样式表之间的区别只有一行: border 释义

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

一个描述组件外观的基本样式表
一种样式扩展了onMouseOver事件的basic(仅包含边框)
onMouseOut事件的另一种样式extend basic(仅包含边框)

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

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>

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

2 回复 | 直到 4 年前

ahadortiz 8 年前

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>

这一定有用

Farzad Yousefzadeh 8 年前

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

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>