Expose props for nested MUI components

[abelsj60]

Hi. Really great package!

Any chance you could expose the MUI props for the other components?

• DialogTitle
• DialogContent
• DialogContentText
• DialogActions

I need to restyle the title bar with a background-color and contrasting text color. I'd be adding default styling at provider and overriding it at call site based on type (confirm, don't confirm, etc...). I'd also like to customize the color of the text content and the padding of the rest (via defaults). Unfortunately, I don't think I can use global styling here.

Any help appreciated...!

[jonatanklosko]

I think exposing props of all the elements would be too coupled to the actual implementation. So this is the case where you essentially would like to have a self-built dialog and just re-use the mechanics for opening/closing the dialog with the hook. This sounds like an idea for a more generic package. I found react-modal-hook, which follows this idea, however I find it quite cumbersome to use for modals you need to parameterize (e.g. show the name of whatever got clicked). I came up with a slightly different implementation that is actually pretty simple and makes it more convenient to shows modals on the fly. Here you can find the material-ui-confirm demo modified to use this implementation instead (lib includes the relevant files, while the ConfirmationDialog is what you'd write yourself, so fully customizable). I may create a package for that, but if your issue has high priority, then hopefully either of the options mentioned would do.

[abelsj60]

I've got to tell you, this is some amazing customer service. My hat is absolutely off to you!

I've just come back around to a related task, and will dive into your sandbox — really, very much appreciated. This is of a higher priority for us right now, so I'm very much interested in what you've suggested here. I'll let you know what we do.

In terms of a new library, I'd be happy to beta test when and if you get there...!

-james

[joshkay]

What are your thoughts on having a separate prop called content (or whatever you prefer) that would allow me to further customize the content in the dialog instead of being locked to using the DialogContentText?

For example, I am trying to separate the text across multiple lines, but because the description is wrapped in a <p> element I am limited on what I can do.

If you are interested, I could create a PR.

Awesome library! Makes showing these kinds of confirmation dialogs a breeze. Thanks for creating this!

[jonatanklosko]

I wouldn't want to break compatibility, perhaps have a look at the alternative approach I mentioned in the comment above. Let me know if that works for you.

[jonatanklosko]

Some props were added in #38 to support better accessibility. As for further configuration, I suggest exploring the alternative approach.