search

eBay / nice-modal-react

A modal state manager for React.
https://ebay.github.io/nice-modal-react
MIT License
1.96k stars 110 forks source link

Nice Modal integration with Material UI #101

Closed RoyBikram closed 1 year ago

RoyBikram commented 1 year ago

When we use Nice Modal with the Material UI library the theming of MUI is not passed down to the Dialog.

tsx
// use case
NiceModal.show(CustomDialog, {usedBeforeActivity: true});

// CustomDialog
const CustomDialog = () => {
  return <Dialog {/* config... */}>/* … */</Dialog>
}
supnate commented 1 year ago 
// CustomDialog
const CustomDialog = (props) => {
  return <Dialog {...props} {/* config... */}>/* … */</Dialog>
}
ruppysuppy commented 1 year ago

@supnate sorry for the late reply, but Material UI components receive theme from context not props. Here is a sandbox to replicate the issue: https://codesandbox.io/s/mui-theme-not-working-with-nice-modal-j272g1?file=/demo.tsx:808-1029

wallacer commented 7 months ago

Running into this issue - is there a solution?

Edit: Looks like the fix is to use the declarative way of creating your Modals https://opensource.ebay.com/nice-modal-react/#declarative