From 5a25be2258862dc6fd280a66ed17bea6a5e0d3ee Mon Sep 17 00:00:00 2001
From: Ulises Lara <ulara@nearsoft.com>
Date: Fri, 27 Dec 2019 13:59:03 -0600
Subject: [PATCH 1/2] [Theme] Add support for custom breakpoint values in
 between() function

---
 .../pages/customization/breakpoints/breakpoints.md  |  4 ++--
 .../material-ui/src/styles/createBreakpoints.js     | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md
index 4397b96cc896a1..8f8c9072a7795f 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints.md
@@ -171,8 +171,8 @@ const styles = theme => ({
 
 #### Arguments
 
-1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.).
+1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
+2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
 
 #### Returns
 
diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
index e05d9588f4108c..b1ff2100395e6e 100644
--- a/packages/material-ui/src/styles/createBreakpoints.js
+++ b/packages/material-ui/src/styles/createBreakpoints.js
@@ -38,15 +38,20 @@ export default function createBreakpoints(breakpoints) {
   }
 
   function between(start, end) {
-    const endIndex = keys.indexOf(end) + 1;
+    const endIndex = keys.indexOf(end);
 
-    if (endIndex === keys.length) {
+    if (endIndex === keys.length - 1) {
       return up(start);
     }
 
     return (
-      `@media (min-width:${values[start]}${unit}) and ` +
-      `(max-width:${values[keys[endIndex]] - step / 100}${unit})`
+      `@media (min-width:${
+        typeof values[start] === 'number' ? values[start] : start
+      }${unit}) and ` +
+      `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number'
+        ? values[keys[endIndex + 1]]
+        : end) -
+        step / 100}${unit})`
     );
   }
 

From e2138cb8b903dfda927750a6c9fe4ea4b2b619da Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 31 Dec 2019 10:52:06 +0100
Subject: [PATCH 2/2] add test case

---
 .../material-ui/src/styles/createBreakpoints.test.js     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui/src/styles/createBreakpoints.test.js b/packages/material-ui/src/styles/createBreakpoints.test.js
index bc01d896b22db6..4668064da44f48 100644
--- a/packages/material-ui/src/styles/createBreakpoints.test.js
+++ b/packages/material-ui/src/styles/createBreakpoints.test.js
@@ -23,7 +23,7 @@ describe('createBreakpoints', () => {
       assert.strictEqual(breakpoints.down('md'), '@media (max-width:1279.95px)');
     });
 
-    it('should use the specified key if it is not a recognized breakpoint', () => {
+    it('should accept a number', () => {
       assert.strictEqual(breakpoints.down(600), '@media (max-width:599.95px)');
     });
 
@@ -40,6 +40,13 @@ describe('createBreakpoints', () => {
       );
     });
 
+    it('should accept numbers', () => {
+      assert.strictEqual(
+        breakpoints.between(600, 800),
+        '@media (min-width:600px) and (max-width:799.95px)',
+      );
+    });
+
     it('on xl should call up', () => {
       assert.strictEqual(breakpoints.between('lg', 'xl'), '@media (min-width:1280px)');
     });