Dynamic CSS for React components using React's v16 element array render result

react16-css.js

class Button extends Component {

  @css`
    background-color: #ff0000;
    width: 320px;
    padding: 20px;
    border-radius: 5px;
    border: none;
    outline: none;
    &:hover {
      color: #fff;
    }
    &:active {
     position: relative;
     top: 2px;
    }
    @media (max-width: 480px) {
      & {
        width: 160px;
      }
    }
  `;

  render() {
    return <button>{this.props.children}</button>;
  }

}