From 3924d3c1be16ad50d2b5d612b32e8f576cf64ce8 Mon Sep 17 00:00:00 2001
From: Cesar Landeros Delgado <chichozell@gmail.com>
Date: Sun, 25 Feb 2018 04:13:42 -0600
Subject: [PATCH] fix: fix the media queries utils so it gets the values from
 the current theme (#420)

---
 src/styled-components.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styled-components.ts b/src/styled-components.ts
index 14df738f04..d08dd75585 100644
--- a/src/styled-components.ts
+++ b/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,7 +24,7 @@ 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)};
       }
     `;
@@ -32,7 +32,7 @@ export const media = {
 
   greaterThan(breakpoint) {
     return (...args) => css`
-      @media (min-width: ${theme.breakpoints[breakpoint]}) {
+      @media (min-width: ${props => props.theme.breakpoints[breakpoint]}) {
         ${(css as any)(...args)};
       }
     `;
@@ -40,7 +40,7 @@ export const media = {
 
   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)};