Override expansion panel margins

src/client/components/App.js

@@ -12,6 +12,15 @@ const theme = createMuiTheme({
       tooltip: {
         fontSize: '1 rem'
       }
+    },
+    MuiExpansionPanel: {
+      root: {
+        '&$expanded': {
+          marginTop: 8,
+          marginBottom: 8
+        }
+
+      }
     }
   }
 });

src/client/components/facet_bar/FacetBar.js

@@ -23,14 +23,6 @@ const styles = theme => ({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   },
-  expansionPanelRoot: {
-    margin: 0,
-    //marginBottom: theme.spacing(1)
-  },
-  expansionPanelRootExpanded: {
-    margin: theme.spacing(1),
-    //marginBottom: theme.spacing(1)
-  },
   expansionPanelSummaryRoot: {
     paddingLeft: theme.spacing(1),
     cursor: 'default !important'
@@ -167,10 +159,6 @@ class FacetBar extends React.Component {
       <ExpansionPanel
         key={facetID}
         expanded={isActive}
-        classes={{
-          root: classes.expansionPanelRoot,
-          expanded: classes.expansionPanelRootExpanded
-        }}
       >
         <ExpansionPanelSummary
           classes={{