A wrapper over material ui's Typography component using Styled Components. Provides topGutter, leftGutter.. properties like other material components including custom color, weight and truncate properties.

styles.jsx

// Support for custom color keys, as well as hexcode
export function getColorFromKey(colorKey) {
  switch (colorKey) {
    case 'primary':
      return theme.palette.primary.main;
    case 'secondary':
      return theme.palette.secondary.main;
    case 'textPrimary':
      return theme.palette.text.primary;
    case 'textSecondary':
      return theme.palette.text.secondary;
    case 'green':
      return theme.palette.green.main;
    case 'purple':
      return theme.palette.purple.main;
    case 'red':
      return theme.palette.red.main;
    case 'orange':
      return theme.palette.graphs.lightOrange;
    case 'mustard':
      return theme.palette.secondary.main;
    case 'yellow':
      return theme.palette.yellow.main;
    case '':
    case null:
    case 'default':
      return theme.palette.text.primary;
    default:
      return colorKey; // return the hashcode
  }
}

const TruncateCSS = css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;


export const GutterCSS = css`
  ${props =>
    props.rightGutter &&
    css`
      margin-right: ${props.theme.spacing(props.rightGutter)}rem;
    `};
  ${props =>
    props.leftGutter &&
    css`
      margin-left: ${props.theme.spacing(props.leftGutter)}rem;
    `};
  ${props =>
    props.bottomGutter &&
    css`
      margin-bottom: ${props.theme.spacing(props.bottomGutter
      )}rem;
    `};

  ${props =>
    props.topGutter &&
    css`
      margin-top: ${props.theme.spacing(props.topGutter)}rem;
    `};
`;

export const StyledTypography = styled(Typography)`
  ${GutterCSS};
  font-weight: ${props => props.weight || 'normal'};
  ${props =>
    props.color &&
    css`
      color: ${getColorFromKey(props.color)};
    `}
  ${props => props.truncate && TruncateCSS};
`;