Title component example - TypeScript + React + styled-components

App.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Title from './Title';

interface Props {
  compiler: string;
  framework: string;
}

const App: React.SFC<Props> = () => <Title isActive />;

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Title compiler="TypeScript" framework="React" />
  </ThemeProvider>,
  document.getElementById('app') as HTMLElement
);

styled-components.ts

import * as styledComponents from 'styled-components';

import { ThemeInterface } from './theme';

const {
  default: styled,
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider
} = styledComponents as styledComponents.ThemedStyledComponentsModule<
  ThemeInterface
>;

export { css, createGlobalStyle, keyframes, ThemeProvider };
export default styled;

theme.ts

export interface ThemeInterface {
  primaryColor: string;
  primaryColorInverted: string;
}
  
export default const theme = {
  primaryColor: '#e9e9eb'
  primaryColorInverted: '161614';
};

Title.tsx

import styled from './styled-components';

const Title = styled<{ isActive: boolean }, 'h1'>('h1')`
  color: ${props => props.isActive ? props.theme.primaryColor : props.theme.primaryColorInverted}
`
  
export default Title;