title: Override padding in smaller devices React material UI
body: <p>I have a grid of column 3,6,3 &amp; I have also given a grid spacing of 3.</p>
  
  <p>For lg, md screen devices sizes it looks okay i.e spacing between grid. But when I reduce the screen size spacing between Grid remains the same which does not look okay</p>
  
  <p>What I want is spacing between Grid for lg &amp; md devices to be 3 but for sm &amp; xs devices to be 0 so I don't see any padding around Grid.</p>
  
  <p>I have inspected the DOM &amp; have seen padding to be 12px for Grid spacing 3.</p>
  
  <p>I have tried this</p>
  
  <pre><code>const theme = createMuiTheme({
    ..., // Other default things
    overrides: {
      MuiGrid: {
        'spacing-xs-3': {
          '&amp; &gt; $item': {
            padding: 'none',
          },
        },
      },
    },
  });
  </code></pre>
  
  <p>This does the job of removing padding which is none obviously but for all device sizes but I want this padding to be removed only for smaller size devices.</p>
  
  <p>I used this inside the component like this</p>
  
  <pre><code>  const useStyles = makeStyles(theme =&gt; ({
       ...,
       overrides: { // This part , I tried both with and without overrides key
         MuiGrid: {
          'spacing-xs-3': {
            '&amp; &gt; $item': {
              [theme.breakpoints.down('md')]: {
                padding: 'none',
              }
            },
          },
        },
      },
    }));
  </code></pre>
  
  <p>None really seems to work, Where am I making mistake?</p>