How to use the styled-components.withTheme function in styled-components

}

const StyledClass: ReactComponentClass<{ foo: string, theme: Theme }> = styled(NeedsThemeReactClass)`
  color: red;
`;

const NeedsFoo1Class: ReactComponentClass<{ foo: string }, { theme: Theme }> = withTheme(NeedsThemeReactClass);

// $ExpectError
const NeedsFoo0ClassError: ReactComponentClass<{ foo: string }> = withTheme(ReactClass);
// $ExpectError
const NeedsFoo1ClassError: ReactComponentClass<{ foo: string }> = withTheme(NeedsFoo1Class);
// $ExpectError
const NeedsFoo1ErrorClass: ReactComponentClass<{ foo: number }> = withTheme(NeedsThemeReactClass);
// $ExpectError
const NeedsFoo2ErrorClass: ReactComponentClass<{ foo: string }, { theme: string }> = withTheme(NeedsThemeReactClass);
// $ExpectError
const NeedsFoo3ErrorClass: ReactComponentClass<{ foo: string, theme: Theme }> = withTheme(NeedsFoo1Class);
// $ExpectError
const NeedsFoo4ErrorClass: ReactComponentClass<{ foo: number }> = withTheme(NeedsFoo1Class);
// $ExpectError
const NeedsFoo5ErrorClass: ReactComponentClass<{ foo: string, theme: string }> = withTheme(NeedsFoo1Class);

// ---- INTERPOLATION TESTS ----
const interpolation: Array = styled.css`
  background-color: red;
`;

// $ExpectError
const interpolationError: Array = styled.css`
  background-color: red;
`;

/>
      
    )
  }
}

const Ruler = styled.div.attrs(({ height }) => ({
  style: {
    height,
  },
}))`
  position: relative;
  width: 100%;
`

export default withTheme(Chart)

activeClassName="activeLink">
            {elem}
          
        
      ))}
    
  )
}

PageNav.propTypes = {
  header: PropTypes.bool.isRequired,
  nav: PropTypes.array.isRequired,
  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
}

export default withTheme(PageNav)

*/
  children: PropTypes.node,
};

const defaultProps = {
  theme: theme,
};

export const Grid = props => ;

StyledGrid.displayName = 'StyledGrid';

Grid.propTypes = propTypes;
Grid.defaultProps = defaultProps;

export default memo(withTheme(Grid));

<div id="{this.chartId}">
        
      
    )
  }
}

export default withTheme(LocationMap)

/*
   fetch('http://antvis.github.io/static/data/china-pm.json')
   .then(response =&gt; response.json())
   .then(data =&gt; {})
 */
</div>

{this.state.expended ? (
                  
                ) : (
                  
                )}
              
            
          
          {this.state.expended && this.renderDetails()}
        
      
    );
  }
}

export default withTheme(VirtualCardDetails);

appear: 'fade',
          appearActive: 'show',
          enter: 'fade',
          enterActive: 'show',
          leave: 'fade',
        }}
        {...rest}
      >
        {isOpen ? children : null}
      
    );
  }
}

Fade.defaultProps = defaultProps;
export default withTheme(Fade);

};

TextInput.defaultProps = {
  name: '',
  label: '',
  placeholder: '',
  error: '',
  leftIcon: null,
  rightIcon: null,
};

TextInput.contextTypes = {
  formik: PropTypes.object,
};

export default withTheme(TextInput);

{this.renderModalContent({
                  valueSent,
                  valueSentInUsd,
                  toggle,
                })}
              
            )}
          
          
        
      
    );
  }
}

export const SendView = withTheme(Component);

}
    if (currency.type === 'TokenCurrency') {
      return (
        
          
            {currency.ticker[0]}
          
        
      )
    }
    const IconCurrency = getCryptoCurrencyIcon(currency)
    return IconCurrency ?  : null
  }
}

export default withTheme(CryptoCurrencyIcon)