Modular ceshesh ay

button.css

.root {
  display: block;
  width: 200px;
  margin: 40px;
  background: none;
  border: 1px solid #749ED8;
  border-radius: 3px;
  padding: 10px 14px;

  &:active {
    background: #FFE6C4;
  }
  &:focus {
    border-color: color(#749ED8 shade(40%));
    .text {
      color: color(#5879A6 shade(40%));
    }
  }
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 14px;
  height: 14px;
  background-color: #87BAFF;
}

.text {
  font-size: 14px;
  color: #5879A6;
  margin-left: 5px;
}

button.js

import React from 'react'
import style from './button.css'

export default React.createClass({

  getClass(className) {
    if(typeof this.props.style === 'undefined'
      || typeof this.props.style[className] === 'undefined') {
      return style[className]
    }

    return this.props.style[className]
  },

  render() {
    return (
      <button className={this.getClass('root')}>
        <div className={style.content}>
          <span id={this.props.icon} className={style.icon} />
          <span className={this.getClass('text')}>{this.props.text}</span>
        </div>
      </button>
    )
  }
})

parent.css

.root {
  padding: 40px;
}

.redButton {
  composes: root from './Button/style.css';
  border: 1px solid #D85042;

  &:active {
    background: #D85042;
  }
  &:focus {
    border-color: color(#D85042 shade(40%));
    .text {
      color: color(#D85042 shade(40%));
    }
  }
}

.redButton__text {
  composes: text from './Button/style.css';
  color: #D85042;
}

parent.js

import style from './index.css'
import React from 'react'
import Button from './Button'

export default React.createClass({

  render() {
    return (
      <div className={style.root}>
        <Button
          onClick={this.handleClick}
          icon="someIcon"
          text="My Button" />
        <Button
          onClick={this.handleClick}
          icon="someIcon"
          text="My Button"
          style={{
            root: style.redButton,
            text: style.redButton__text
          }} />
      </div>
    )
  },
})