Material-ui: [Grid] Change spacing

[Richtervn]

How can I change spacing of Grid component as it doesn't respect theme.spacing.unit

I want <Grid container spacing={8}> to have margin: -5px and its <Grid item> to have padding: 5px.
I did this in overrides key of theme.

MuiGrid: {
  container: {
    '&$spacing-xs-8': {
      margin: -5,
    }
  }

It worked with the container but not the item. How can I select Grid children of this container

[oliviertassinari]

@Richtervn I think that we should change the Grid API in v4. We can use 1,2,3,4 instead of hardcoded values 8,16,24,32. We can also make the Grid relies on the theme.spacing.unit value.

[Richtervn]

@oliviertassinari yeah, thanks. But right now, is it possible to select Grid item nested inside Grid container using jss withStyles and how can I do it ?

[oliviertassinari]

@Richtervn Yes, theme.overrides should work.

[Richtervn]

@oliviertassinari
but how, I tried

container: {
  '&$spacing-xs-8': {
     '$item' | '&$item' | '& $item' | ...
  }
}

Nothing work :( poor me

[oliviertassinari]

@Richtervn If you can setup a codesandbox, I can try and report back here.

[mediafreakch]

@Richtervn Did you figure it out? I'm struggling with the same...

[Richtervn]

@mediafreakch yeah. I used overrides.

Here is an example how I override MuiGrid spacing={16}

container: {
    '&$spacing-xs-16': {
      width: `calc(100% + ${spacing.unit * 2}px)`,
      margin: -spacing.unit,
      '& $item': {
        padding: spacing.unit
      }
    }
  }

[mediafreakch]

@Richtervn Thanks, just to be clear: You use overrides on the theme level?

[Richtervn]

@mediafreakch yeah

createMuiTheme({
  overrides: {
     MuiGrid: {
        container: .........
     }
  }
})

[ifndefdeadmau5]

@oliviertassinari @Richtervn If nobody has took it already, can I try?

[oliviertassinari]

@ifndefdeadmau5 Sure, how do you want to handle the problem?

[ifndefdeadmau5]

@oliviertassinari

Relying on the theme.spacing.unit sounds good to me.

But I'm little bit worrying as it would be my first attempt for contribute to core API, I was just searching for appropriate issues that I can contribute among v4 milestone and this one seems like simple fix to me(or maybe I'm wrong).

So... if you feel I'm not skilled enough to handle this then I can find another issue? haha

[oliviertassinari]

@ifndefdeadmau5 This change is breaking, we will only release it with v4.
Yes, I think that it's a matter of using theme.spacing.unit in the Grid component and of changing the spacing values prop types.
In @material-ui/system, we have introduced the support for unit as an array and a function. I think that it's interesting to support these values too.
Your help is welcomed. Skills are one thing, what's more important is the outcome. If you need to learn in order to complete the task, then do it. If you don't, it's even simpler :).

[ifndefdeadmau5]

@oliviertassinari Got it. Would you please review my code if I submit a PR? I guess showing code is faster way to figure out whether I need to learn something or not.

[oliviertassinari]

Yes

[ifndefdeadmau5]

@oliviertassinari
So this is my understanding of 'relies on the theme.spacing.unit value' idea.
spacing prop now become a just number and it is calculated based on theme value.
This is what you meant, right? 🤔

```git.diff

• const GUTTERS = [0, 8, 16, 24, 32, 40];

styles[spacing-${breakpoint}-${spacing}] = {
- margin: -spacing / 2,
+ margin: -theme.spacing.unit * spacing / 2,
- width: calc(100% + ${spacing}px),
+ width: calc(100% + ${theme.spacing.unit * spacing}px),
'& > $item': {
- padding: spacing / 2,
+ padding: theme.spacing.unit * spacing / 2,
},
};

...

• spacing: PropTypes.oneOf(GUTTERS),
• spacing: PropTypes.number,

```

[oliviertassinari]

@ifndefdeadmau5 If we keep using static style sheets, we need to keep the GUTTERS variable, the only difference will be the values used (index instead of final values):

-const GUTTERS = [0, 8, 16, 24, 32, 40];
+const GUTTERS = [1, 2, 3, 4, 5, 6, 7, 8]; 

[ifndefdeadmau5]

@oliviertassinari
Okay! I kept GUTTERS and submitted PR with corresponding documentation updates.

[fullofcaffeine]

Where is the dollar sign in &$spacing... documented? Does it work like a wild-card of sorts?