Change style of ModalBackdrop

[marco-calderon]

Hi developer,

First of all, thank you for this time-saving library! I have been using it for a couple of hours by now and I have configured it to match my app style.

But I was wondering, the way I needed to style the ModalBackdrop (when using BaseModal) is via CSS styling. Is there a way to do this like passing a style props to it?

[andria-dev]

Currently, you have to use the "BottomModal__backdrop" class (this is a typo in my code, I meant to put "Base") to style the Backdrop. I can add a way to pass in a style object (or if you feel up to the task you could write a PR).

I assume that what you want to do is akin to the following

<BaseModal backdropStyle={{ backgroundColor: 'pink' }}>
  {/* Your modal content */}
</BaseModal>

However, I'm curious as to what you want to style it for? Like, what CSS would you like to change?

[marco-calderon]

Thanks for the info! My objective is to give it style for centering the modal (I'm using flexbox to achieve that), as the BaseModal component seems to not have it, I might have missing something. I attach a screenshot so you can see the behavior of the modal on my end.

This is the style I added to it via a CSS class:

.ModalBackdrop { z-index: 1000001; display: flex; justify-content: center; align-items: center; }

This is the result:

[andria-dev]

@flexocarpius You should probably just use the CenterModal component provided by this library. If that doesn't work for some reason let me know why.

However, even if you need to center it a different way than the <CenterModal> component, you can just create a wrapper div inside of <BaseModal> that will center your content for you. Note that I'm using CSS classes here but the React version with style={{ display: 'flex' }} also works since you control the components.

Here is how I did it inside of the <CenterModal> component code:

https://github.com/ChrisBrownie55/react-spring-modal/blob/88e8b89d6a496d17f64cf1a58e9d673bf9c6c5ba/CenterModal/index.tsx#L41-L46

https://github.com/ChrisBrownie55/react-spring-modal/blob/88e8b89d6a496d17f64cf1a58e9d673bf9c6c5ba/CenterModal/style.css#L1-L7

[andria-dev]

The <ModalBackdrop> doesn't need to be changed at all in your case as it's styles should have no effect on the position of your content thus allowing you to style and position your content freely.

But again, I've already implemented this in <CenterModal> and you can use it like so:

https://codesandbox.io/s/react-spring-modalcentermodal-0f4hd

Show Code

```jsx import React, { useState } from "react"; import { CenterModal } from "react-spring-modal"; import "react-spring-modal/dist/index.css"; export function App() { const [isOpen, setOpen] = useState(false); return ( <> setOpen(true)}>Open modal setOpen(false)} style={{ backgroundColor: "white", padding: "1rem 2rem", borderRadius: "0.25rem" }} >

The Modal

); } ```

[andria-dev]

Please let me know if this helps you at all, if not I'm more than willing to make some changes to the codebase 👍 @flexocarpius

[andria-dev]

Also, @flexocarpius you shouldn't need to mess with the z-index in your style code unless you already have something with a modified z-index. In which case I still wouldn't suggest using z-index on .BackdropModal

Instead I would suggest styling your #modal-root to have the higher z-index to avoid any conflicts with multiple modals it anything like that

[marco-calderon]

Hi @ChrisBrownie55, thank you for the info and quick turnaround! I will try using the method you mentioned to center the modal, I think I missed that. Regarding the z-index, that also works 👍

[marco-calderon]

Just a question, would I be able to implement a custom animation using the <CenterModal> component? I forgot to mention this.

[andria-dev]

@flexocarpius if you look at the API section of the README you'll see that the modalTransition prop can be used to replace the animation on <CenterModal>

Something like:

const transition = useTransition(/* ... */)

return (
  <CenterModal modalTransition={transition}>
    {/* ... */}
  </CenterModal>
)