Transparent Swipeable drawer Material-UI

Question

I need to know how to apply a 'transparent' style porperty background to my SwipeableDrawer component from Material UI... Since the component creates another component in my html file when it renders i cannot change his background from my code. I tried to put some , but it seems that the component doesn`t like it.

Thanks in advance.

Answer 1

As stated in Material-ui Docs you can override the style of Modal using ModalProps. Using the BackdropProps of Modal you can able to set the background to transparent.

Create a styles variable and apply the necessary styles.

const styles = {
  BackdropProps: {
    background: 'transparent'
  }
};

Apply the style to the root of Backdrop using classes property

<SwipeableDrawer ModalProps={{
          BackdropProps:{
            classes:{
              root:classes.BackdropProps
            }
          }
        }}
        {...otherProps}>

Have a look at overriding components with classes in the docs