fix: fix the media queries utils so it gets the values from the curre…

…nt theme (#420)

src/styled-components.ts

@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-import theme, { ThemeInterface } from './theme';
+import { ThemeInterface } from './theme';
 
 export type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ThemeInterface>;
 
@@ -24,23 +24,23 @@ const {
 export const media = {
   lessThan(breakpoint) {
     return (...args) => css`
-      @media (max-width: ${theme.breakpoints[breakpoint]}) {
+      @media (max-width: ${props => props.theme.breakpoints[breakpoint]}) {
         ${(css as any)(...args)};
       }
     `;
   },
 
   greaterThan(breakpoint) {
     return (...args) => css`
-      @media (min-width: ${theme.breakpoints[breakpoint]}) {
+      @media (min-width: ${props => props.theme.breakpoints[breakpoint]}) {
         ${(css as any)(...args)};
       }
     `;
   },
 
   between(firstBreakpoint, secondBreakpoint) {
     return (...args) => css`
-      @media (min-width: ${theme.breakpoints[firstBreakpoint]}) and (max-width: ${theme.breakpoints[
+      @media (min-width: ${props => props.theme.breakpoints[firstBreakpoint]}) and (max-width: ${props => props.theme.breakpoints[
           secondBreakpoint
         ]}) {
         ${(css as any)(...args)};