[Grid] Add root class (#15163)

mui · Apr 2, 2019 · 03e01e3 · 03e01e3
1 parent 5a0a15f
commit 03e01e3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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}`.