Material-ui: [Suggestion] Provide the option to disable all padding around all elements, allow custom spacing

[AndrewMorsillo]

It might be nice to provide an option to size all (or most) components so that they take up no more space than the visual element itself. This would provide an easy way to incorporate MUI components into layouts that don't necessarily follow the default spacing.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Context

I have a simple use case. I want to override the styles of a switch so that it has no "padding" around it. By default there is a lot of space on each side of a switch. That is I want the switch element to only be the size of the switch itself. I can't seem to solve this easily (or at all) using withStyles.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.42 |
| React | 16.3.1 |

[oliviertassinari]

they take up no more space than the visual element itself

@AndrewMorsillo This is the approach we are trying to fallback to for all our components. I think that the issue is specific to the selection controls. I have no access to a computer as I'm writing this line. From memory, the extra space taken is a placeholder for the ripple animation.

[mbrookes]

@oliviertassinari - not at a computer either, but that’s correct. This is a dupe of a closed issue - there is no extra margin around the components beyond that needed to display them.

[oliviertassinari]

@mbrookes What about adding a dense mode to the SwitchBase components?

[oliviertassinari]

I think that we definitely need such property. We can even think of making it the default behavior in the next breaking change. Some benchmark with the switch:

• Material-UI
  
• material components web
  
• vuetify
  
• react-toolbox
  

[mbrookes]

Ah, and have the focus indicator / ripple overflow. That makes sense.

[galenlong]

Any updates on this issue? This would be very useful for me as well.

[oliviertassinari]

@galenlong The situation has changed between v3 and v4. I have refactored the implementation of the component to take the spacing constraint into account.

It's a step in the right direction.

[oliviertassinari]

I'm closing as it didn't get traction. You can remove the padding with an override. Thanks for the discussion.