Custom CSS

[artsx]

Hello, I'm trying to find how to customize CSS, I have located the files and .JS I could get what I wanted. But is there another way directly into the component or the modal is called to customize it?

I could put className and add what I needed to style the modal but I do not put classes for each element type of the background, the overall modal

If you have a solution I'm interested,

Best regards,

[m1n0s]

@artsx actually you can. Just pass style prop to ModalDialog component and this styles will be applied as well.

[qimingweng]

@artsx sorry for the late response, but you can actually just write your own version of ModalDialog to do this, then your code would look like this...

<ModalContainer>
  <MyOwnModal/>
</ModalContainer>

[ghost]

Is there any way for me to customise styles for ModalContainer? I want to lower the default opacity of 0.85.

[jarrodmoldrich]

For future reference for anyone who wants to customise the background color, instead expand into a ModalPortal and ModalBackground:

<ModalPortal>
  <ModalBackground zIndex={1000} backgroundColor='#00000040'>
    <ModalDialog>...</ModalDialog>
  </ModalBackground>
</ModalPortal>

Or ditch this library and use portals directly with your own dialog code: https://reactjs.org/docs/portals.html