Using styled components with props and typescript

Question

I\'m trying to integrate typescript into our project and so far I stumbled upon one issue with styled-components library

Consider this component

import *         


        

Answer 1

You need only specify a interface:

import { createGlobalStyle } from 'styled-components';

interface PropsGlobalStyle {
  dark: boolean
}

export default createGlobalStyle`
  body {
    box-sizing: border-box;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: ${(props:PropsGlobalStyled) => (props.dark ? '#FFF' : '#000')};
background-color: ${(props:PropsGlobalStyled) => (props.dark ? '#000' : '#FFF')};
  }
`;