Take advantage of CSS's cascading to write manageable css-in-js

Button-reorganized.tsx

const Button = styled<IStyle, 'button'>('button')`
  display: inline-block;
  vertical-align: middle;
  padding: 0.5em 1em;
 
  font-size: ${getFontSize};
  font-weight: bold;
  font-weight: ${getFontWeightFromSize};
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  line-height: 1;
  
  color: #fff;
  background: ${getColor('main')};
  border-radius: 490px;
  border-width: 0;
  border-style: solid;
  border-color: ${getColor('main')};
  box-sizing: border-box;

  & + & {
    margin-left: 1em;
  }
  &:hover,
  &:focus {
    transform: translateY(-1px);
    background: ${getColor('lighter')};
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.4);
  }
  &:focus {
    outline: 2px dotted rgba(255, 255, 255, 0.4);
  }
  &:active {
    transform: translateY(0);
  }

  ${({ icon }) =>
    icon && `
    padding: 0.5em;
    line-height: 0;
  `}
  ${({ square, theme }) =>
    square && `
    border-radius: ${theme.borderRadius};
  `}
  ${({ theme, outline, size }) =>
    outline && `
    border-width: ${theme.borderWidth[size]};
    background: transparent;
    &:hover, &:focus {
      background: rgba(255,255,255,0.12);
    }
  `}
  ${({ color }) =>
    color === 'link' && `
      &:hover, &:focus {
      box-shadow: transparent;
    }
  `}
`;