Extend Theme

[ManAnRuck]

Hi @joshtynjala, can you add an example how to extend the theme with Typescript.

For example add an additional background-color (+hover) color for Buttons.

<Button icon="github" color="github" />

for example the GitHub color will be #d1b643 (hover #c2a730)

• #d1b643
• #c2a730 (hover)

[ManAnRuck]

this is my try, but perhaps there is a better solution 😇

import * as React from 'react';
import { Button, SemanticICONS, StrictButtonProps } from 'semantic-ui-react';
import styled from 'styled-components';

interface OAuthButtonProps extends StrictButtonProps {
  service: SemanticICONS;
}

const ButtonOAuth = styled(({ customColor, ...rest }) => <Button {...rest} />)`
  &&& {
    background-color: ${({ customColor }) =>
      customColor === 'github' ? '#d1b643' : ''};
    &:hover {
      background-color: ${({ customColor }) =>
        customColor === 'github' ? '#c2a730' : ''};
    }
  }
`;

export const OAuthButton: React.SFC<OAuthButtonProps> = ({
  service,
  ...rest
}) => {
  let customColor;
  let color: StrictButtonProps['color'];
  switch (service) {
    case 'github':
      customColor = service;
      break;
    default:
      color = service as StrictButtonProps['color'];
      break;
  }

  return (
    <ButtonOAuth
      {...rest}
      customColor={customColor}
      icon={service}
      color={color}
    />
  );
};

my next improvement on this example will be use styled-component themes to handle the colors global