React Radium Class 样式覆盖

Question

我正在尝试使用 Radium 编写干净和 DRY 代码样式。到目前为止，这就是我的按钮。

/**
*
* Button
*
*/

import React, { PropTypes } from 'react';
import Radium from 'radium';

const styles = {
  base: {
    borderRadius: '3px',
    backgroundColor: '#23cdf4',
    fontSize: '13px',
  },
  primaryBlue: {
    backgroundColor: '#23cdf4',
  },
  primaryBlueBig: {
    borderRadius: '8px',
    fontSize: '16px',
    padding: '14px 28px',
  },
  primaryRed: {
    backgroundColor: '#F99CAC',
  },
};

class Button extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        style={[styles.base, styles[this.props.type], this.props.style]}
      >
        {text}
      </button>
    );
  }
}

Button.propTypes = {
  text: PropTypes.any,
  type: PropTypes.oneOf(['primaryBlue', 'primaryBlueBig']).isRequired,
  style: PropTypes.object,
  disabled: PropTypes.bool,
};

export default Radium(Button);

两件事我想不通：

如何在不重复自己的情况下将primaryBlue使用的背景颜色扩展到primaryBlueBig？
如果禁用为真，如何更改两个蓝色按钮的背景颜色？

这是我目前正在使用的版本的精简版，我正在努力避免在渲染函数中使用巨大的 if else 块。谢谢！ ^.^

Answer 1

您可以使用 modifiers.

这基本上就是您已经在做的事情，但需要进行更多的重构。

我会稍微不同地定义样式：

const styles = {
  base: {
    borderRadius: '3px',
    backgroundColor: '#ffffff',
    fontSize: '13px',
  },

  primaryBlue: {
    backgroundColor: '#23cdf4',
  },
  primaryRed: {
    backgroundColor: '#F99CAC',
  },

  big: {
    borderRadius: '8px',
    fontSize: '16px',
    padding: '14px 28px',
  },

  disabled: {
    primaryBlue: {
      backgroundColor: '#eeeeee',
    },
    primaryRed: {
      backgroundColor: '#eff0f1',
    }
  }
};

然后你可以有一个 big 和一个 disabled 道具。

return (
  <button
    style={[
      styles.base,
      styles[this.props.type],
      this.props.big && styles.big,
      this.props.disabled && styles.disabled[this.props.type]
    ]}>
    {text}
  </button>
);

React Radium Class 样式覆盖

React Radium Class Style Overrides

css

reactjs

radium