From 03e01e36e54498ab5bde99d3c8ffadf4f742e4b7 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 3 Apr 2019 00:00:19 +0200
Subject: [PATCH] [Grid] Add root class (#15163)

---
 packages/material-ui/src/Grid/Grid.js      | 3 +++
 packages/material-ui/src/Grid/Grid.test.js | 4 +++-
 pages/api/grid.md                          | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index adab599f3c0525..4d9656e94c9b3f 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -93,6 +93,8 @@ function generateGutter(theme, breakpoint) {
 // flexWrap: 'nowrap',
 // justifyContent: 'flex-start',
 export const styles = theme => ({
+  /* Styles applied to the root element */
+  root: {},
   /* Styles applied to the root element if `container={true}`. */
   container: {
     boxSizing: 'border-box',
@@ -216,6 +218,7 @@ const Grid = React.forwardRef((props, ref) => {
   } = props;
 
   const className = clsx(
+    classes.root,
     {
       [classes.container]: container,
       [classes.item]: item,
diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js
index 902e11f6682712..07f13177f063af 100644
--- a/packages/material-ui/src/Grid/Grid.test.js
+++ b/packages/material-ui/src/Grid/Grid.test.js
@@ -20,9 +20,11 @@ describe('<Grid />', () => {
   });
 
   describeConformance(<Grid />, () => ({
+    classes,
+    inheritComponent: 'div',
     mount,
-    only: ['refForwarding'],
     refInstanceof: window.HTMLDivElement,
+    testComponentPropWith: 'span',
   }));
 
   it('should render', () => {
diff --git a/pages/api/grid.md b/pages/api/grid.md
index 732c000c9d4792..1d230663d883f8 100644
--- a/pages/api/grid.md
+++ b/pages/api/grid.md
@@ -46,6 +46,7 @@ This property accepts the following keys:
 
 | Name | Description |
 |:-----|:------------|
+| <span class="prop-name">root</span> | Styles applied to the root element
 | <span class="prop-name">container</span> | Styles applied to the root element if `container={true}`.
 | <span class="prop-name">item</span> | Styles applied to the root element if `item={true}`.
 | <span class="prop-name">zeroMinWidth</span> | Styles applied to the root element if `zeroMinWidth={true}`.