CODEWITHSUNDEEP
cssreactjsmaterial-ui
Adeel Imran
Adeel Imran

Reputation: 13976

React Material UI Have A Switch Without Any Extra Padding

I want to have a Switch component without extra height, width, padding, margin

This is my Switch component

<Switch
      checked={isSubscriptionStatusActive}
      onChange={onHandleChangeSubscriptionStatus}
      disabled={subscriptionStatus === 'deactive'}
      aria-label="subscribption-status"
      classes={{
        root: classes.root,
        bar:  classes.bar,
      }}
 >

Here is it's styling

let style = {
 root: {
 display: 'inline-flex',
 width: 0,
 position: 'relative',
 flexShrink: 0,
 },
 bar: {
  borderRadius: 7,
  display: 'block',
  position: 'absolute',
  width: 34,
  height: 14,
  top: '50%',
  marginTop: -7,
  left: '50%',
  marginLeft: 0,
 },
};

Steps to Reproduce (for bugs)

https://codesandbox.io/s/x2wom4pm9z
https://codesandbox.io/embed/x2wom4pm9z

Material UI Issue Filed Here https://github.com/mui-org/material-ui/issues/9587

Upvotes: 0

Views: 2139

Answers (1)

Matt
Matt

Reputation: 3780

Technically, Switch doesn't have any "extra" width or height. The whitespace around it is used to render the ripple.

You can disable the ripple with the disableRipple prop, and affect the Switch width as you've dicscovered, but digging into the source, unfortunately it isn't currently possible to pass props to SwitchBase which would be needed to affect the IconButton that is used for the switch "thumb".

You could perhaps modify your issue to discuss the posibility of submitting a PR to adress this limitation. We have xxxProps props on other components for similar purposes.

PS. You forgot to link from your issue to here, but I found it anyway. :)

Upvotes: 1

Related Questions