CSS in JS using styled-components

FlatButton.ts

import * as React from 'react';
import styled from 'styled-components';
import {
  WHITE, MIDNIGHT,
  SILVER, LIGHT_SILVER, DARK_SILVER,
  RED, LIGHT_RED, DARK_RED,
  BLUE, LIGHT_BLUE, DARK_BLUE,
} from '../../constants/colors';
import { SHORT_DURATION } from '../../constants/duration';
import { REGULAR_HORIZONTAL_MARGIN, REGULAR_RADIUS_LENGTH } from '../../constants/size';

type Props = {
  theme?: 'primary' | 'danger';
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  children?: React.ReactNode;
};

const HEIGHT = 36;

const Button = styled.button`
  display: inline-block;
  height: ${HEIGHT}px;
  line-height: ${HEIGHT - 2}px;
  padding: 0 ${REGULAR_HORIZONTAL_MARGIN}px;
  background-color: ${SILVER};
  border: 1px ${DARK_SILVER} solid;
  border-radius: ${REGULAR_RADIUS_LENGTH}px;
  outline: none;
  color: ${MIDNIGHT};
  transition: background-color ${SHORT_DURATION} ease-in-out 0ms;
  cursor: pointer;
  &:hover { background-color: ${LIGHT_SILVER} }
  &:focus { background-color: ${LIGHT_SILVER} }
  &:active { background-color: ${DARK_SILVER} }
`;

const PrimaryButton = styled(Button)`
  background-color: ${BLUE};
  border: 1px ${DARK_BLUE} solid;
  color: ${WHITE};
  &:hover { background-color: ${LIGHT_BLUE} }
  &:focus { background-color: ${LIGHT_BLUE} }
  &:active { background-color: ${DARK_BLUE} }
`;

const DangerButton = styled(Button)`
  background-color: ${RED};
  border: 1px ${DARK_RED} solid;
  color: ${WHITE};
  &:hover { background-color: ${LIGHT_RED} }
  &:focus { background-color: ${LIGHT_RED} }
  &:active { background-color: ${DARK_RED} }
`;

const FlatButton: React.StatelessComponent<Props> = (props: Props) => {
  let Component = Button;

  if (props.theme === 'primary') Component =  PrimaryButton;
  if (props.theme === 'danger') Component = DangerButton;

  return (
    <Component onClick={e => e.currentTarget.blur() || props.onClick && props.onClick(e)}>
      {props.children}
    </Component>
  );
};

export default FlatButton;