[Hidden] Use the render prop API

[udanpe]

Example 1. First the second Grid sets xs={12} then sets Hidden and all flashing

<Hidden smDown>
  <Grid item xs={2}>
    <Other />
  </Grid>
</Hidden>
<Grid item xs={12} md={10}>
  <Other />
<Grid>

Example 2. implementation='css'

<Hidden smDown implementation='css'>
  <Grid item xs={2}>
    <Other />
  </Grid>
</Hidden>
<Grid item xs={12} md={10}>
  <Other />
<Grid>

render

<div constainer>
  <div hidden>
    <div col-2> // 16% from hidden not from container. Why not <div hidden row-2></div> ?
  </div>
  <div col-10>
  </div>
</div>

Example 3. Need remove margin and padding from result

<Grid item xs={2}>
  <Hidden smDown><Other /></Hidden>
</Grid>

What about xs={0}? When 0 set css display:none and dont need use Hidden
And why i dont can set implementation='css' in MuiTheme?

<Grid item xs={0} md={2}>
  <Other />
</Grid>
<Grid item xs={12} md={10}>
  <Other />
<Grid>

[oliviertassinari]

@udanpe I don't understand. Could you explain, thank you.

[udanpe]

<Grid container> // 100%
  <Hidden smDown implementation='css'> // 100-83%=16.666%
    <Grid item xs={2}> // 100/12*2 = 16.666% from hidden = 1% from container
      <Other />
    </Grid>
  </Hidden>
  <Grid item xs={12} md={10}>// 100/12*10 = 83.333%
    <Other />
  <Grid>
</Grid>

[udanpe]

with implementation='css'
https://codesandbox.io/s/v3151yo340
without implementation='css'
https://codesandbox.io/s/8kkz44mqm2

[oliviertassinari]

@udanpe I'm sorry, but it's the same problem as #11795. Please follow our issue template and explain one issue at the time, clearly. You can't use the Hidden CSS implementation with the Grid. I want to work in the future on a render props API to remove the cloneElement and extra div unexpected behavior.