CSS in JS ideas

Rules.js

import { cx } from 'css-in-js';
import { flex, flexAuto, noWrap } from '../styles/utilities';
import { Button, Button__green } from './styles';

const Button = props => {
  const className = cx([
    flex,
    flexAuto,
    Button,
    props.isGreen && Button__green
  ]);
  return <button className={className}>{props.children}</button>;
};

export default Button;

withJSX.js

const styles = [
  <StyleRule
    className="Button"
    minWidth={200}
    maxWidth={100}
    whiteSpace="nowrap">
    <StyleRule element="a" color="black" />
  </StyleRule>
];

const Button = props => {
  return <button styleDef="Button">{children}</button>;
}

export default withStyles(styles)(Button);